Vue 中的虚拟DOM 和 diff 算法

Vue中的虚拟DOM

1. 内存中先生成一颗虚拟DOM 树
2. 将内存中的虚拟DOM树 初始化渲染成 真实DOM树
3. 当修改 data 里面的数据的时候
4. 将之前的虚拟DOM树 结合新的数据再次生成DOM树
5. 与上一次生成的DOM树 进行对比 （diff 算法）
6. 把有差异的地方 进行重新真实DOM 结构的渲染 这样可以大量减少对真实DOM 的操作 从而提高了性能

diff 算法

传统的Diff算法通过循环递归对节点进行比较，然后判断每个节点的状态以及要做的操作（add，remove，change），最后 根据Virtual DOM进行DOM的渲染。大体流程如下图

虚拟DOM的diff算法

1. 虚拟DOM中，在DOM的状态发生变化时，虚拟DOM会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。
2. 在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历
3. 如果节点类型改变，直接将旧节点卸载，替换为新节点，旧节点包括下面的子节点都将被卸载，如果新节点和旧节点仅仅是类型不同，但下面的所有子节点都一样时，这样做也是效率不高的一个地方。
4. 节点类型不变，属性或者属性值改变，不会卸载节点，执行节点更新的操作。
5. 文本改变，直接修改文字内容。
6. 移动，增加，删除子节点时：

如果想插入的时候 没有 :key 值 唯一标识符

如果插入的时候 有了 :key 值 唯一标识符

就能找到 准确的位置进行插入 不会在 一个个的卸载 装载 浪费性能了