vue diff算法-双指针-2

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

情景1   新后 与 旧前 涉及到节点移动时，移动到旧后指针指向的节点之后

10.png

• 第一步 新前 与 旧前 没有命中；然后再对比 新后 与 旧后，也没有命中；接着往下对比，新后 与 旧前 发现是相同节点。新后指针上移一位，旧前指针下移一位；移动 真实dom A 放到旧后指针的后面，如下

11.png

• 第二步 新前 与 旧前 没有命中；然后再对比 新后 与 旧后，也没有命中；
  接着往下对比，新后 与 旧前 发现是相同节点。新后指针上移一位，旧前指针下移一位，移动 真实dom B 到旧后指针的后面，如下
  12.png

• 第三步 同理如下

  
  13.png

• 第四步 同理如下

  
  14.png

• 第五步 新前 与 旧前 发现是相同节点，新前 与 旧前指针分别下移一位，此时前指针 > 后指针，并且所有节点对比结束。

情景2  新前 与 旧后 涉及到节点移动时，移动到旧前指针指向的节点之前

15.png

• 第一步 新前 与 旧前 没有命中；接着对比 新后 与 旧后 没有命中；接着对比新后 与 旧前 没有命中；接着对比 新前 与 旧后 发现是相同节点，新前指针下移一位，旧后指针上移一位，并移动 真实domE 放到旧前指针指向的节点之前，如下
  16.png

• 第二步 ① 新前 与 旧前 ②新后 与 旧后 ③新后 与 旧前 ④新前 与 旧后发现以上四种条件都没有命中；然后会去旧节点中找有没有 节点C ，找到后移动到旧前指针指向的节点之前，如下
  17.png

• 第三步 ① 新前 与 旧前 ②新后 与 旧后 ③新后 与 旧前 ④新前 与 旧后发现以上四种条件都没有命中；然后会去旧节点中找有没有 节点M ，发现没有 节点M ，创建 真实dom M 并放到旧前指针指向的节点之前，如下
  18.png

参考自 bilibili 【尚硅谷】Vue源码解析之虚拟DOM和diff算法，视频讲的比较细在第12节
作图工具 draw.io