八、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