VUE中虚拟dom和Diff算法

什么是虚拟DOM？
虚拟 DOM 就是为了解决浏览器性能问题而被设计出来的。

1.为开发效率提供方便

2.进行最小的dom操作，提高执行效率

虚拟的DOM的核心思想是：
对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。

这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想：

(1) 提供一种方便的工具，使得开发效率得到保证

(2) 保证最小化的DOM操作，使得执行效率得到保证

虚拟DOM优点
Vistual DOM可以将多个改动合并成一个批量的操作，从而减少了DOM重排的次数，进而缩短了生成渲染树和绘制所花的时间

什么是虚拟DOM的Diff算法？
虚拟DOM中，在DOM的状态发生变化时，虚拟DOM会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。
在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历。

diff 算法包括几个步骤：

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档中

当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

把所记录的差异应用到所构建的真正的DOM树上，视图就更新了。

注意
1.如果节点类型改变，直接将旧节点卸载，替换为新节点，旧节点包括下面的子节点都将被卸载，如果新节点和旧节点仅仅是类型不同，但下面的所有子节点都一样时，这样做也是效率不高的一个地方。
2.节点类型不变，属性或者属性值改变，不会卸载节点，执行节点更新的操作。
3.文本改变，直接修改文字内容。
4.写代码时，如果没有给数组或枚举类型定义一个key，就会采用粗暴算法。
如果为元素增加key后，Vue就能根据key，直接找到具体的位置进行操作，效率比较高。

在v-for中提供key，一方面可以提高性能，一方面也会避免出错