vue2的diff算法

作用

对比新旧虚拟 DOM 树，最小化完成对真实 DOM 的更新。

执行时间点

当组件创建或更新时执行。

步骤

1. _render 函数生成新的虚拟 DOM 树。
2. _update 函数对比新旧虚拟 DOM 树，完成对真实 DOM 的更新。
   • 保存旧的虚拟 DOM 树（this._vnode）。
   • 创建新的虚拟 DOM 树（this._vnode = this._render()）。
   • 旧树不存在，_patch 直接遍历新树，为每个节点生成真实 DOM，并挂在到每个节点的 elm 属性上；旧树存在，对比新旧虚拟 DOM 树，完成对真实 DOM 的更新（_patch）。
3. _patch
   • 根节点比较，不相同，直接替换；相同，比较子节点。

     相同：标签和 key 值都相同，input 元素还要 type 相同。

   • 子节点比较（diff 的核心），双端指针加遍历实现。
     • 顺序：新旧头，新旧尾，旧头新尾，旧尾新头。
     • 结果：一样则进入更新，不一样则以新头为基准，在旧树种寻找，找到则更新，找不到则创建，最后销毁旧树种多余的节点。