vue diff算法-双指针-1
2025-12-23 本文已影响0人
逗婆苍穹
- 分别在新旧虚拟dom创建两对指针,组成4个判断条件
判断的顺序如下,如果满足条件①, ②③④将不再进行判断,以此类推
① 新前 与 旧前 ② 新后 与 旧后 ③ 新后 与 旧前 ④ 新前 与 旧后
不论匹配到 ①②③④ 的哪一种情况,前指针都是下移,后指针都是上移
情景1
1.png
-
第一步:新前 与 旧前一致,跳出本次循环,旧前指针下移一位,新前指针下移一位,如下
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,就是要被删掉的节点