Vue2-diff算法之首尾对比法

180 阅读1分钟

首尾对比法的比较流程

  1. 在 oldVNode 和 newVNode 的分别设置头部和尾部指针。

  2. 在循环中,依次进行头-头,头-尾,尾-头,尾-尾的比较

    • 如果匹配成功,将节点插入真实DOM中,且匹配的头部或尾部指针向内收缩。
    • 如果匹配不成功,则继续下一步。
  3. 如果四次比较仍未匹配,则通过 key 去 oldVNode 中寻找对应的节点

    • 找到对应节点,复用节点并插入真实DOM中。
    • 未找到对应节点,创建新节点并插入真实DOM中。
  4. 当 oldVNode 或 newVNode 中头部指针超过尾部指针时,结束比较过程。

    • 若 oldVNode 中剩余节点,直接删除节点。
    • 若 newVNode 中剩余节点,新增节点并插入真实DOM中。

演示

0. 初始状态

1.tif

1. 处理第一个节点

2.tif

2. 处理第二个节点

3.tif

3. 处理第三个节点

4.tif

4. 处理第四个节点

5.tif

5. 处理第五个节点

d5.tif