vue 3 diff算法采用分层策略，首推双端比对：从新旧子节点数组头尾同步比对，匹配则复用，不匹配即停；双端结束后剩余节点直接批量卸载或挂载；仅当剩余节点数量相等且乱序时，才启用lis优化移动。

Vue 3 的 Diff 算法不是对 Vue 2 的简单升级，而是围绕“减少真实 DOM 操作”重构的一套分层策略。双端比对是它的第一道防线，也是命中率最高、开销最低的环节。

双端比对：从头尾同时“收口”，跳过大量重复工作

算法启动后，立即用两个指针分别从新旧子节点数组的开头和结尾推进：

• 头部同步：逐个比对 key 和 节点类型，相同就复用并递归 patch，直到遇到第一个不匹配项
• 尾部同步：同样逻辑，从末尾往前比，匹配成功就复用，不匹配即停
• 这个过程天然适配真实业务场景——列表增删往往发生在中间，头尾结构稳定，比如导航栏、页脚、固定表头等

比对终止后，边界立刻清晰，无需遍历全量

双端结束后，剩余未处理的节点范围被精确框定：

vue-component-analyzer

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

下载

• 若旧节点还有剩余（e1 ≥ i），说明这些节点在新列表中已不存在，直接批量卸载
• 若新节点还有剩余（e2 ≥ i），说明是全新插入，按顺序挂载即可
• 这一步完全绕开了 key 查找和位置计算，纯线性操作，时间复杂度接近 O(k)，k 是剩余节点数

为乱序处理铺路：双端压缩后的“中间段”才是 LIS 的舞台

只有当新旧剩余节点数量相等、但顺序混乱时，算法才进入最复杂的第三阶段：

• 双端比对把原始长列表压缩成一个更小的待处理区间，大幅降低 LIS 计算的数据规模
• 此时构建 oldKeyToIndex 映射表，再生成新节点在旧列表中的位置序列
• LIS 不是用来排序的，而是找出哪些节点“本来就在正确相对顺序里”，这些节点原地复用，其余才移动

双端比对本身不解决乱序，但它让乱序问题变小、变少、变得可预测。这才是它真正的优化价值。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！