vue虚拟dom,diff算法

虚拟DOM

用js来模拟DOM中的节点

相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来。而且DOM操作会引起浏览器的回流和重绘，性能消耗非常大

diff 算法

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

其有两个特点：

1. 比较只会在同层级进行, 不会跨层级比较
2. 在diff比较的过程中，循环从两边向中间比较

diff 算法包括几个步骤：

1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
3. 把所记录的差异应用到所构建的真正的 DOM 树上，视图就更新了
   

---

实现虚拟DOM

例如一个真实的DOM节点
真实DOM

我们用JS来模拟DOM节点实现虚拟DOM
虚拟DOM
其中的Element方法具体怎么实现的呢？
Element方法实现

第一个参数是节点名（如div），第二个参数是节点的属性（如class），第三个参数是子节点（如ul的li）。除了这三个参数会被保存在对象上外，还保存了key和count。其相当于形成了虚拟DOM树。

有了JS对象后，最终还需要将其映射成真实DOM

我们已经完成了创建虚拟DOM并将其映射成真实DOM，这样所有的更新都可以先反应到虚拟DOM上，如何反应？需要用到Diff算法。

diff流程图：当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。