Vue理论-随笔

1.v-if和v-for的优先级哪个更高，同时使用时如何正确处理？

v-for的优先级更高，在每次渲染时，都会先循环再判断，在源码中，可以看到两者的处理逻辑，先for再if，若是同时使用，最好在v-for外层写一层template，先行判断，再进行循环。

2.Vue组件中的data为什么必须是个函数，而根实例时则没有该限制？

主要是为了防止数据污染，组件有可能会是多个，也就是说多个Vue组件共用一个data，如果这时data是对象的话，那么一个组件的数据变更会影响到所有共用这个data的组件，而根实例创建时是直接new了一个新的Vue，它每次都是新的且只有一个，所以不会出现这种数据污染的情况。

3.key的作用和原理

Key的主要作用是更高效的更新虚拟DOM，原理是vue在patch过程中可以通过key精准判断两个节点是否是同一个，避免频繁更新DOM，提高效率，以插入数组节点为例，若不使用key，需要更新每一个数组节点，然后最后在创建节点并插入最后一位，而使用key后，则是去循环数组，进行首尾节点比较，相同则不做任何更新操作，不同则创建新节点并插入。
不使用key进行插入：

使用key进行插入：

（Vue中diff执行的时刻是组件实例执行其更新函数时，它会对比上一次渲染结果oldVnode和新的的渲染结果newVnode，此过程称为patch）

4.diff算法

a.必要性 组件中可能会存在多个data中的key使用，特别是watcher中，可以精准监找到变化发生的地方
b.执行方式 策略:深度优先，同级比较， 找到节点中最后一个孩子，再进行比较，比较完成后上移继续比较
c.高效性 主要处理同级比较