Vue 中的 DOM-Diff

在 Vue 中，把 DOM-Diff 过程叫做patch 过程（核心）。patch,意为“补丁”，即指对旧的 VNode 修补，打补丁从而得到新的 VNode。

总之一句话：以新的 VNode 为基准，改造旧的 oldVNode 使之成为跟新的 VNode 一样，这就是 patch 过程要干的事。

整个 patch 无非就是干三件事：

• 创建节点：新的 VNode 中有而旧的 oldVNode 中没有，就在旧的 oldVNode 中创建。
• 删除节点：新的 VNode 中没有而旧的 oldVNode 中有，就从旧的 oldVNode 中删除。
• 更新节点：新的 VNode 和旧的 oldVNode 中都有，就以新的 VNode 为准，更新旧的 oldVNode

diff的具体过程

1. 先标记新、旧节点的开始和结束位置
2. 进行循环处理节点
   1. 新节点数组中第一个节点和旧数组中的第一个节点对比，相同，直接用新节点复用老节点，进行 patchVNode 复用
   2. 不同：新数组里面的最后一个节点和旧数组里的最后一个节点对比，相同，直接用新节点复用老节点
   3. 不同：再把新数组的最后一个节点和旧数组中第一个节点对比
      • 如果相同，直接用新节点复用老节点
      • 更新完后，再将旧数组中的该节点移动到 与新节点相同的位置
   4. 不同：把新节点中第一个节点和旧数组中最后一个节点做对比
   5. 不同：查看旧数组中是否有新数组的第一个节点，没有就直接在新节点中插入
3. 递归处理