Vue3和vue2的Diff算法有何差异？

一、核心差异：从 “全量对比” 到 “靶向更新”

Vue2 和 Vue3 的 DIFF 算法本质都是 “同层对比”，但对比的精细度和跳过无效对比的能力完全不同。

Vue3 的 DIFF 算法通过引入 “静态标记” 和 “最长递增子序列”，在性能上比 Vue2 有显著提升，尤其是在处理长列表和复杂 DOM 结构时。

关键优化点拆解

（1）静态标记（PatchFlag）：只更 “该更的”

Vue2 问题：即使节点只有文本变化，也会对比节点的所有属性（class、style、props 等），做很多无效工作。

Vue3 优化：编译阶段给节点打上标记，明确节点的 “动态内容类型”，对比时只检查标记对应的内容。

示例：<div class="box" :title="msg">Hello</div> 会被标记为 PatchFlag.PROPS（仅 props 变化），对比时只看title，忽略class和静态文本 “Hello”。

（2）静态提升（HoistStatic）：跳过 “不变的”

Vue2 问题：每次渲染都会重新创建静态节点（如无动态绑定的<div>静态文本</div>），并参与 DIFF 对比。

Vue3 优化：将静态节点编译时 “提升” 到渲染函数外，只创建一次，后续渲染直接复用，且 DIFF 时完全跳过这些节点，不进入对比逻辑。

（3）列表 Diff：少动 “要移的”

Vue2 问题：处理列表重新排序时（如删除中间项），会通过双指针遍历，对后续节点执行 “删除旧节点 + 插入新节点”，操作次数多。

Vue3 优化：通过 “最长递增子序列” 算法，找到列表中无需移动的节点序列，只对其他节点做最少次数的移动，大幅减少 DOM 操作。

例：列表从 [1,2,3,4] 变为 [2,3,1,4]，Vue3 会识别出 “2,3,4” 是递增子序列，只需将 “1” 移动到 “3” 后面，而不是删除再插入。

二、性能表现差异

小 DOM 结构 / 简单场景：两者差异不明显，Vue2 的 DIFF 也足够快。

长列表 / 复杂场景：Vue3 优势显著。例如 1000 条数据的列表重新排序，Vue3 的 DOM 操作次数可减少 50% 以上，渲染耗时更低。

静态内容多的页面：如包含大量纯文本、固定图片的页面，Vue3 因跳过静态节点对比，首次渲染和更新速度都更快。