vue diff算法-双指针-1

• 分别在新旧虚拟dom创建两对指针，组成4个判断条件
  判断的顺序如下，如果满足条件①, ②③④将不再进行判断，以此类推
  ① 新前 与 旧前 ② 新后 与 旧后 ③ 新后 与 旧前 ④ 新前 与 旧后
  不论匹配到 ①②③④ 的哪一种情况，前指针都是下移，后指针都是上移

情景1

• 第一步：新前 与 旧前一致，跳出本次循环，旧前指针下移一位，新前指针下移一位，如下

  
  2.png

• 第二步：新前 与 旧前一致，跳出本次循环，旧前指针下移一位，新前指针下移一位，如下

  
  3.png

• 第三步：新前 与 旧前一致，跳出本次循环，旧前指针下移一位，新前指针下移一位，如下

  
  4.png
• 此时，新前 < 新后，新虚拟dom循环结束。但旧虚拟dom中还有没有循环完毕的，剩下的就是要删除掉的。

• 反之旧节点先循环完毕，新节点中剩下的就是需要新增的节点

  
  5.png

情景2

• 上边只是比较理想的情况，下面我们上一点难度，如下

  
  6.png

• 第一步 新前 与 旧前一致，跳出本次循环，旧前指针下移一位，新前指针下移一位，如下

  
  7.png

• 第二步 新前 与 旧前一致，跳出本次循环，旧前指针下移一位，新前指针下移一位，如下

  
  8.png
• 第三步 对比上图发现 ① 新前 与 旧前 ② 新后 与 旧后 ③ 新后 与 旧前 ④ 新前 与 旧后 这四种条件均不满足。然后他会去旧节点中找有没有D这个节点，如果没有就新增，如果有就把旧节点D打上标记，并创建真实dom移动到还未处理的旧前指针之前，如下
  9.png
• 此时新节点全部处理完毕，旧虚拟dom中剩下的旧节点C E，就是要被删掉的节点

作图工具 draw.io