2021年我的前端面试小结(70题)

前言

金九银十，因为各种原因我离职了，然后开始步入找工作的情况，base厦门，下面简单复盘一下多家公司被问到的一些面试题。后面的题目很多都是重复性的或者相关的，我只是简单说说自己回答，具体答案你要自己去学习去理解，这样才是你的，有些题我放一些参考链接，你可以根据实际去学习。

内容有点多，建议点赞收藏那就是会了

自我介绍

大部分情况，面试官简单说一下自己然后让你自我介绍一下。这是第一步，基本都会有，我也有碰见不需要让我自我介绍的面试官(雷厉风行的那种说你基本情况简历有，我们跳过自我介绍环节直接开始)

自我介绍：面试官早上/下午好，我叫王小二，某年某学校某专业毕业，今天来应聘贵公司的前端工程师岗位，我从事前端开发三年多，然后简单描述第一家入职情况，第二家公司入职情况。说一下自我性格等等，巴拉巴拉精简一点

面试题复盘

这里是我记录的一些面试题没有难度顺序只是一个简单复盘，个别题目有点小重复，没有进行二次过滤。下面面试题基本以vue2为准，少部分涉及vue3

1.生命周期

beforeCreate => created =>beforeMount => Mounted =>beforeUpdate => updated =>beforeDestroy=> destroyed

keep-alive下：activated deactivated

扩展链接

vue官网文档

2.父子生命周期顺序

父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created =>子beforeMount => 子Mounted=>父Mounted

子组件先挂载然后到父组件,更新也类似父beforeUpdate =>子beforeUpdate => 子updated => 父updated

扩展链接

vue官网文档

3.父子组件传值

vue2为例： $emit,props,$ref,$parent,$children, eventBus, provide/inject, vuex

扩展链接

父子组件传值

4.跨域8种解决方案

iframe + document.domain location.hash window.name等三种
postMessage
proxyTable
nodejs 中间件
cors
websocket
jsonp
nginx反向代理

扩展链接

跨域的多种解决方案

5. 普通函数箭头函数的区别* 构造函数

1.箭头函数没有原型原型是undefined
2.箭头函数this指向全局对象而函数指向引用对象
3.call，apply，bind方法改变不了箭头函数的指向

改正一下第二点：箭头函数的this指向创建时父级的this。或者用另一个兄弟说的：箭头函数的this应该是创建时所在作用域指向的对象

扩展链接

普通函数与箭头函数的区别是什么？

6.reduce(累加器的使用,自己实现)

arr.reduce(a,b)
a为一个函数，b为初始值
arr.reduce((a,b,c,d)=>{a为初始值，计算后的total b为当前数组值 c为当前idnex d为整个数组 })

扩展链接

8个JS的reduce使用实例，和reduce的骚操作

7.jq和vue什么区别 *

Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。它相比我们传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护。