vue底层原理之虚拟DOM（VDOM）和diff算法

虚拟DOM（VDOM）和diff算法
1. 虚拟DOM是什么？
虚拟DOM利用了js对象的object的对象模型来模拟真实DOM，结构是树形结构

优点：速度比操作真实DOM快。

缺点：
（1）. 更多的功能意味着更多的代码。幸运的是Vue.js 2.0仍然是相当小的（21.4kb当前版本）。
（2）. 虚拟DOM需要在内存中的维护一份DOM的副本。在DOM更新速度和使用内存空间之间取得平衡。

应用场景
虚拟DOM不是适合所有情况
如果虚拟DOM大量更改，这是合适的。
But ……如果单一的，频繁的更新的话，虚拟DOM将会花费更多的时间处理计算的工作。
所以，如果你有一个DOM节点相对较少页面，用虚拟DOM，它实际上有可能会更慢。 但对于大多数单页面应用，这应该都会更快。

2.diff算法
diff算法是用来比较两个或是多个文件，返回值是文件的不同点
diff算法是同级比较的
diff思维也是来自后端

diff算法的比较思维
比较后会出现四种情况：
（1）.此节点是否被移除 -> 添加新的节点
（2）.属性是否被改变 -> 旧属性改为新属性
（3）.文本内容被改变-> 旧内容改为新内容
（4）.节点要被整个替换 -> 结构完全不相同 移除整个替换
3.整个VDOM的使用流程（Vue）
创建VDOM树
利用render函数渲染页面
数据改变，生成新的VDOM
通过diff算法比较 新 旧 两个VDOM，将不同的地方进行修改，相同的地方就地复用，最后再通过render函数渲染页面