Vue Virtual Dom（虚拟Dom） 和 Diff算法

Vue Virtual Dom（虚拟Dom） 和 Diff算法

虚拟Dom:是js对象，把Dom结构转化成便于js操作的对象，对于复杂的文档结构，提供一种方便的工具，进行最小化的Dom操作

虚拟Dom和真实Dom的区别

• 虚拟DOM不会进行排版与重绘操作
• 真实DOM频繁排版与重绘的效率是相当低的
• 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
• 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部

Diff算法

1. 用JavaScript对象结构表示出一个Dom树，这个树就是一个真正的Dom树，并插到文档中
2. 当状态变换的时候，会重新创建一个新的Dom树，然后把新的Dom树和旧的Dom树进行比较，记录两个树的差异
3. 把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了