三十七个常见Vue面试题，背就完事了二

八、vue.mixin的使用场景和原理?
Vue的mixin的作用就是抽离公共的业务逻辑，原理类似对象的继承，当组件初始化的时候，会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。 如果混入的数据和本身组件的数据有冲突，采用本身的数据为准。
缺点：命名冲突、数据来源不清晰
九、Vue的组件data为什么必须是一个函数?
new Vue是一个单例模式，不会有任何的合并操作，所以根实例不必校验data一定是一个函数。 组件的data必须是一个函数，是为了防止两个组件的数据产生污染。 如果都是对象的话，会在合并的时候，指向同一个地址。 而如果是函数的时候，合并的时候调用，会产生两个空间。
十、请说明nextTick的原理。
nextTick是一个微任务。

• nextTick中的回调是在下次Dom更新循环结束之后执行的延迟回调
• 可以用于获取更新后的Dom
• Vue中的数据更新是异步的，使用nextTick可以保证用户定义的逻辑在更新之后执行

十一、computed和watch的区别是什么？

• computed和watch都基于watcher来实现的。
• computed的属性是具备缓存的，依赖的值不发生变化，对其取值时计算属性方法不会重复执行
• watch是监控值的变化，当值发生改变的时候，会调用回调函数

十二、Vue.set方法是如何实现的？

• vue给对象和数组本身都增加了dep属性
• 当给对象新增不存在的属性的时候，就会触发对象依赖的watcher去更新
• 当修改数组索引的时候，就调用数组本身的splice方法去更新数组

十三、Vue为什么要用虚拟Dom

• 虚拟dom就是用js对象来描述真实Dom，是对真实Dom的抽象
• 由于直接操作Dom性能低，但是js层的操作效率高，可以将Dom操作转化成对象操作。最终通过diff算法比对差异进行更新Dom
• 虚拟Dom不依赖真实平台环境，可以实现跨平台

十四、Vue的diff算法原理是什么？
Vue的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式+双指针方式比较

• 先比较两个节点是不是相同节点
• 相同节点比较属性，复用老节点
• 先比较儿子节点，考虑老节点和新节点儿子的情况
• 优化比较：头头、尾尾、头尾、尾头
• 比对查找，进行复用

十五、既然vue通过数据劫持可以精准的探测数据变化，为什么还要进行diff检测差异？

• 响应式数据变化，Vue确实可以在数据变化的时候，响应式系统可以立刻得知。但是如何每个属性都添加watcher的话，性能会非常的差。
• 粒度过细，会导致更新不精准

所以采用watcher + Diff算法来检测差异。
十六、请说明key的作用和原理

• Vue在patch过程中，通过key可以判断两个虚拟节点是否是相同节点。
• 没有key会导致更新的时候出问题
• 尽量不要采用索引作为key