vue的diff算法

数据变化时vue进行节点更新

问题：有时修改了某个数据，如果直接渲染到真实 DOM 上会引起整个 DOM树的重绘和重排。
解决：先根据真实 DOM 生成一颗 virtual DOM，计算 virtual DOM 中节点数据变化的部分，将该部分进行原生 DOM 操作，而不用重新渲染整个页面。

virtual DOM

用 js 对象结构表示 DOM 树的结构，然后用这个树构建一个 真正的 DOM 树，插入到文档当中。当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树的差异。把所记录的差异应用到所构建的真正的 DOM 树上，视图就更新了。Virtual DOM 本质上就是在 js 和 DOM 之间做了一个缓存。
生成 vNode ——> 渲染成真实节点 ——> 挂载到页面 ——> diff 比较

Diff 算法

针对具有相同父节点的同层新旧子节点进行比较，而不是使用逐层搜索递归遍历的方式。时间复杂度为O(n)。

同级比较

比较时，先比较相同节点是否都有子节点，若有继续向下比较是否有子节点，直到没有子节点，进行同级比较，然后返回上一层继续进行同级比较。

如果节点类型不同，直接删掉此节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。 如果节点类型相同，则会重新设置节点的属性࿰