Vue3 Diff 算法片段解析：新旧节点队列之乱序比对与更新策略

在 Vue 3 的虚拟 DOM 更新机制中，Diff 算法扮演着至关重要的角色。它不仅决定了如何高效地比较新旧节点树的变化，还直接影响了最终的 DOM 操作性能。本文将以一个具体的例子为基础，深入剖析 Vue 3 中 Diff 算法在处理相同节点但顺序不同时的优化策略。
示例背景：
旧节点队列（c1）：a b [c d e] f g
新节点队列（c2）：a b [e c d h] f g
其中 [c d e] 和 [e c d h] 是发生变化的部分，经过双端比较后，我们从索引 i = 2 开始进行 Diff 比较，对应的旧子序列范围是 [2, 4]，新子序列范围是 [2, 5]。
旧结束下标使用e1表示为e1=4
新结束下标使用e2表示为e2=5

第一步：建立新节点的 key 到索引的映射表

为了快速定位新节点在旧结构中的位置，Vue 会先构建一个 Map，用于记录新子序列中每个节点的 key 及其索引：

const keyToNewIndexMap = new Map();
for (let i = s2; i <= e2; i++) {
    const nextChild = c2[i];
    keyToNewIndexMap.set(nextChild.key, i);
}

假设节点的 key 分别为：

节点	key
e	e
c	c
d	d
h	h
则生成的映射关系为：

{
  e: 2,
  c: 3,
  d: 4,
  h: 5
}

第二步：标记新旧节点之间的对应关系

接下来，我们遍历旧子序列，查找它们在新子序列中的位置，并记录下来：

const toBePatched = e2 - s2 + 1; // 新节点序列个数
const newIndexToOldMapIndex = new Array(toBePatched).fill(0);// 0代表新增节点

for (let i = s1; i <= e1; i++) {
    const prevChild = c1[i];
    let newIndex = keyToNewIndexMap.get(prevChild.key);
    if (newIndex == undefined) { // 新队列不存在旧节点直接删除
        unmount(prevChild);
    } else { // 记录旧节点所在的新位置
        newIndexToOldMapIndex[newIndex - s2] = i + 1;
        patch(prevChild, c2[newIndex], container);// 比对
    }
}

在这个例子中，旧子序列 [c, d, e] 对应的新索引如下：

newIndexToOldMapIndex = [5, 3, 4, 0] // 下标的值代表旧节点所在的位置

倒序处理，插入新增节点并移动旧节点

for (let i = toBePatched - 1; i >= 0; i--) {
    const nextIndex = s2 + i;
    const nextChild = c2[nextIndex];
    let anchor = nextIndex + 1 < c2.length ? c2[nextIndex + 1].el : null;

    if (newIndexToOldMapIndex[i] == 0) {
        patch(null, nextChild, container, anchor);
    } else {
        hostInsert(nextChild.el, container, anchor);
    }
}

总结：Vue 3 Diff 算法的关键点
双指针同步扫描：通过 s1, e1 和 s2, e2 定位变化区域，缩小比对范围。
Map 映射加速查找：使用 key 来快速定位节点在新旧队列中的位置。
倒序处理：确保插入操作不影响后续节点的参照物。
区分新增/删除/移动节点：精确控制 DOM 的变更类型，提升性能。