Vue3快速Diff预处理是真正提速核心，通过双端同步剪枝、单边收尾判断、构建key映射表及标记索引准备四步，精准压缩变动范围并为LIS优化奠基。

Vue3 快速 Diff 的“预处理”不是铺垫，而是真正提速的核心动作。它不进入复杂匹配，而是用极低成本快速识别出哪些节点根本不用动——这部分越准、越快，后续要处理的节点就越少，整体性能提升就越明显。

双端同步剪枝：先扫头尾，跳过稳定段

算法起手就从新旧子节点数组的两端同时推进：

• 头部比对：从索引 0 开始，逐个检查 key 和 vnode type 是否完全相同；相同则直接复用（patch），指针 i 向后移动；一旦不同，立即停止
• 尾部比对：从末尾索引开始（oldEndIndex / newEndIndex），同样比 key + type；相同则复用，两个尾指针同步前移；遇到不同时终止
• 这一步纯指针操作，不创建/移动 DOM，时间复杂度接近 O(1)～O(min(m,n))，专治固定 header、footer、左右边栏等静态结构

单边收尾判断：快速判定新增或删除

头尾剪枝结束后，根据指针状态立刻决定下一步动作：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 旧节点已空（i > oldEndIndex）：剩余 newChildren[i…newEndIndex] 全是新增，直接挂载，锚点取 newEndIndex+1 处的 el
• 新节点已空（i > newEndIndex）：剩余 oldChildren[i…oldEndIndex] 全要卸载，顺序调用 unmount
• 只有当两边都还有剩余时，才进入后续耗时环节——这意味着中间变动段已被压缩到最小范围

构建 key 映射表：为高效查找打基础

仅在中间段存在且新节点含 key 时触发：

立即学习“前端免费学习笔记（深入）”；

• 遍历 newChildren 中待处理区间，用 key → 新数组索引（newIndex） 构建 Map
• 这个映射只建一次，后续所有旧节点定位都靠它查，避免每次用 indexOf 做 O(n) 搜索
• 没有 key？退化为线性查找，性能下降明显——这也是 Vue 官方强调 key 不可省略的根本原因

标记与索引准备：悄悄为 LIS 铺路

这步表面看是辅助，实则是 LIS 优化的前提：

• 遍历剩余 oldChildren，对每个节点尝试用 key 查映射表
• 若命中且对应新节点未被标记，则记录其 newIndex 到位置数组中，并标记该新节点“已复用”
• 生成的 newIndexToOldIndexMap 数组，本质是把旧节点在新序列中的目标位置“翻译”出来，LIS 算法将基于它找出最长不动子序列