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、左右边栏等静态结构
单边收尾判断：快速判定新增或删除
头尾剪枝结束后，根据指针状态立刻决定下一步动作：
- 旧节点已空（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 算法将基于它找出最长不动子序列
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
