2020年前端面试题

节前公司突然决定解散技术部，整的小伙伴们手忙脚乱，怎么好好的公司就突然要解散呢！博主刚来这个公司才4个多月，被整的一脸懵逼。剩下就是一些扯皮的事，遇到这么坑的公司也是没有办法。都说金九银十，称这大好的日子赶紧去面试找个靠谱的公司吧！下面整理了一些前端面试题，希望能给在找工作的小伙伴一些帮助。

基础的面试题，在这里就不一一说了，主要说一下进阶的面试题。

一、Vue Key指令的作用

key是为每个vnode指定唯一的id，在同级vnode的Diff过程中，可以根据key快速的进行对比，来判断是否为相同节点，利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快,指定key后,可以保证渲染的准确性(尽可能的复用 DOM 元素。)

为什么不建议用index作为key?

用index 作为 key，和没写基本上没区别，因为不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作。

这里不得不说的事 react 同样具有key属性，在这里简略的说一下：

react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的，而是给React自己使用，有了key属性后，就可以与组件建立了一种对应关系，简单说，react利用key来识别组件，他是一种身份标识，就像每个人有一个身份证来做辨识一样。每个key 对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。

关于Diff算法小伙伴又想了解，给大家分享一个博主地址：https://calendar.perfplanet.com/2013/diff/

二、Vue data 为什么是个函数

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

其次data中为什么要用return包裹变量呢？

不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

三、Vue中computed与watch的区别

1、计算属性computed : 

 

1.  支持缓存，只有依赖数据发生改变，才会重新进行计算。
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化。
3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed。
5. 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

2、侦听属性watch：

1.  不支持缓存，数据变，直接会触发相应的操作；
2. watch支持异步；
3. 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数：

• immediate：组件加载立即触发回调函数执行；
• deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

四、Vuex中mutations与actions 的区别

actions

• 用于通过提交mutation改变数据
• 会默认将自身封装为一个Promise
• 可以包含任意的异步操作

mutations

• 通过提交commit改变数据
• 只是一个单纯的函数
• 不要使用异步操作，异步操作会导致变量不能追踪

五、微任务与宏任务

• 宏任务：当前调用栈中执行的任务称为宏任务。（主代码快，定时器等等）。
• 微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务为微任务。（可以理解为回调事件，promise.then，proness.nextTick等等）。
• 宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。

而宏任务一般是：包括整体代码script，setTimeout，setInterval。微任务：Promise.then，process.nextTick。

六、target、currentTarget的区别？

currentTarget当前所绑定事件的元素

target当前被点击的元素

七、原型链的几种继承方式

• 借用构造函数继承，使用call或apply方法，将父对象的构造函数绑定在子对象上
• 原型继承，将子对象的prototype指向父对象的一个实例
• 组合继承

八、defineProperty 与proxy 的区别

1. Proxy 返回一个Proxy对象，我们只操作该对象即可。defineProperty 则是将原来的对象属性一一遍历重新定义，然后还是操作原来对象。
2. Proxy 有更多的拦截方法（具体看文档），而 defineProperty 只有 get/set 。
3. Proxy 能监测到新添加的属性，而 defineProperty 不能。
4. Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利。
5. Proxy 毕竟是新标准，不可避免存在兼容性问题。

今天就更新到这里~ 如果对您有帮助可以点赞关注！