Vue--虚拟dom和diff算法

虚拟DOM:用js来模拟DOM中的节点。
1、虚拟 DOM 的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话,会有很多不必要的 DOM 操作。

Vue--虚拟dom和diff算法

Vue--虚拟dom和diff算法

Diff算法

a.用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中
b.当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
C、把所记录的差异应用到所构建的真正的 DOM 树上,视图就更新了
Vue--虚拟dom和diff算法