Vue3 快速 Diff 算法源码分析：10 分钟学会核心预处理步骤-Vue.js-PHP中文网

vue3的快速diff算法通过双端同步剪枝、key映射表构建和位置索引数组生成三步预处理，大幅缩小需真实比对的节点范围，仅对中间变动段执行lis优化重排。

vue3 快速 diff 算法源码分析：10 分钟学会核心预处理步骤

Vue3 的快速 Diff 算法（即 “双端对比 + 静态节点跳过 + 最长递增子序列优化”）并不是一上来就暴力比对，而是通过一系列轻量但关键的预处理步骤，大幅缩小需要真实比对的节点范围。掌握这些预处理逻辑，是理解后续核心 Diff 的前提。

当新旧两组子节点（oldChildren 和 newChildren）都非空时，Vue3 会先从两端开始逐个比对：

这步不涉及 DOM 移动或创建，纯指针推进，时间复杂度 O(1)～O(min(m,n))，能快速处理大量静态前置/后置结构（比如固定 header/footer）。

双端同步结束后，可能出现三种情况：

旧节点已耗尽（start > oldEnd）：说明 newChildren 中剩余节点全是新增的，依次 createElm 插入即可；
新节点已耗尽（start > newEnd）：说明 oldChildren 剩余节点全要卸载，遍历 unmount；
双方都还有剩余（start ≤ oldEnd && start ≤ newEnd）：进入核心 Diff 流程——此时剩余的是“中间变动段”，长度通常显著缩小。

这步确保了只有真正可能重排的节点才会进入后续开销更大的映射与查找环节。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

进入中间段 Diff 前，Vue3 会检查 newChildren 中是否所有节点都有有效 key：

如果有，遍历剩余 newChildren，构建 keyToNewIndexMap = new Map()，存 key → newIndex（相对于整个 newChildren 的索引）；
如果没有 key，则退化为朴素的 indexOf 查找（O(n²)），这也是为什么官方强烈建议带 key；
该映射只建一次，后续所有旧节点定位都靠它，避免重复遍历。

注意：这个 map 存的是新节点在 newChildren 中的位置，不是渲染顺序位置，为后续计算“新位置数组”提供基础。

接着遍历剩余的 oldChildren，对每个旧节点尝试在 newChildren 中找匹配项：

用 key 查 map，若命中且对应新节点未被标记为“已处理”，则复用该节点，并记录其在 newChildren 中的索引到 newIndexToOldIndexMap 数组中；
同时将该新节点标记为已处理（如设为 0 或用 Set 记录），防止重复复用；
最终得到一个长度为 newChildren.length 的数组，其中有效位置存旧索引，无效位置填 0 —— 这就是最长递增子序列（LIS）算法的输入源。

这一步本质是把“哪些新位置对应了可复用的旧节点”编码成一个数字序列，把 DOM 重排问题转化为经典算法问题。

不复杂但容易忽略：这些预处理加起来不到 50 行核心代码，却承担了 80% 的剪枝工作。真正调用 getSequence（LIS）和移动节点的，只是最后那个小段。