Vue面试常见的面试问题

1，new Vue()都做了什么

1，new Vue ( ）是创建 Vue 实例，它内部执行了根实例的初始化过程。

2， 初始化过程具体包括以下操作：

• 合并配置
• 初始化事件中心
• 初始化生命周期 (new Vue()时只调用了beforeCreated、created两个生命周期)
• 初始化渲染
• 初始化数据 data、props、computed、watcher 等

3，new Vue( ) 创建了根实例并准备好数据和方法，以备将来执行挂载进使用。

2，说一说你对Vue响应式的理解

1，所谓数据响应式就是用户对数据层做的更改能够触发视图层做出更新响应的机制

2， vue2 中的数据响应式会根据数据类型来做不同处理：

• 如果是对象则采用 object.defineproperty的方式定义数据拦截，当数据被访问或发生变化时，触发set方法并作出晌应；
• 如果是数组则通过vue变更后的数组原型方法（push,shift,unshift,splice,pop,sort,reverse )，从而作出响应。

数组的这种机制很好的解决了数据响应化的问题，但在实际使用中也存在一些缺点：比如：
1，初始化时的递归遍历会造成性能损失；
2，新增或删除属性时需要用户使用 vue.set 或delete 这样特殊的方法才能生效；
3，对于 es6 中新产生的 Map 、 Set 这些数据结构不支持等问题。

为了解决Vue数组中的变更方法引起的问题， vue3 重新编写了这一部分的实现：利用ES6的Proxy机制代理要响应化数据，这样我们就不需要使用特殊api, 初始化性能和内存消耗都得到了大幅改善.

3，最后，Vue通过操作数据，再使用virtual Dom 和 patch算法，就可以使我们只需要操作数据，完全不用接触 dom 操作来更新视图，从而大大提升开发效率，降低开发难度。

3，你知道nextTick吗？

这个考查的是对vue异步更新队列的理解

1，由于 vue更新DOM采用是的异步更新策略，导致我们对数据的修改不会立刻体现在 dom 变化上，nextTick的作用就是，在修改数据之后立即使用这个方法，可以获取更新后的 DOM。

2，那这个是为什么呢？

• 首先，修改数据，这是同步任务，同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及 DOM 。

• 同时，Vue 开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个数据被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 OOM 操作是非常重要的。

• 同步任务执行完毕，开始执行异步队列的任务，更新 DOM。nextTick 方法会在队列中加入一个回调函数，确保该函数在前面的 dom 操作完成后才调用。

3，简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环 中的所有数据变化完成之后，再统一进行dom更新。

参考链接：https://segmentfault.com/a/1190000012861862

4，你知道key的作用吗？

1， key的作用主要是为了更高效的对比虚拟DOM中的某个节点是否是相同节点,尽可能的复用已有元素而不是从头开始渲染。

2，从源码中可以知道，vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key，它的值就是undefined,那么新旧节点中，undefined===undefined,返回true, 则可能永远认为这是两个相同节点，只能去做更新操作，而实际上它们是不需要更新的，这就造成了大量的不必要的dom更新操作。

．