Vue 的 diff 算法 是其虚拟 DOM 更新的核心机制，用于高效比较新旧虚拟 DOM 树并应用最小更新到真实 DOM。Vue 2 和 Vue 3 在 diff 算法上有显著差异。
一、Vue diff 算法的基本原理
Vue 的 diff 算法主要是为了优化虚拟 DOM 的更新效率，通过最小化 DOM 操作来提升性能。
1. 核心思想
-
同层比较：
- Vue diff 算法假设 DOM 结构的变化不会跨层级，只比较同一层级的节点。
- 这避免了深度遍历，提高了效率。
-
双端比较：
- Vue 使用双指针（从两端向中间移动）的方式对比新旧节点，减少了冗余的遍历。
-
最小化更新：
- 如果新旧节点具有相同的 key，则复用 DOM 节点，仅更新属性、事件或内容。
- 如果 key 不同，则认为节点发生变化，销毁旧节点，创建新节点。
2. Vue diff 算法的步骤
-
初始化虚拟 DOM：创建组件或模板对应的虚拟 DOM 树。
-
触发更新：当状态或数据变化时，生成新的虚拟 DOM 树。
-
对比新旧虚拟 DOM：
-
遍历新旧虚拟 DOM，找到变化的节点。
-
比较节点的类型（tag）和 key 值：
- 如果相同，则直接更新内容。
- 如果不同，则销毁旧节点并插入新节点。
-
-
应用变化：将差异（patch）应用到真实 DOM。
二、Vue 2 和 Vue 3 diff 算法的区别
Vue 3 的 diff 算法相比 Vue 2 做了显著优化，提升了性能。
1. 性能优化
Vue 2 的 diff 算法
- 依赖递归：使用递归遍历虚拟 DOM 树，深层嵌套的组件性能较低。
- 逐一比较：即使在列表场景中（如
v-for），也会逐个比较节点，效率较低。 - 静态节点不缓存：每次更新都会重新生成所有节点的虚拟 DOM，即使是没有变化的静态节点。
Vue 3 的 diff 算法
-
基于静态标记优化：使用 静态提升 和 动态标记 技术。
- 静态节点（无变化的内容）在首次渲染后被跳过，直接复用，提高更新效率。
-
列表对比优化：优化了双端比较的逻辑，支持快速定位差异部分。
-
分片更新：对于大型 DOM 树，Vue 3 会分批次（分片）更新，避免单次更新耗时过长导致的卡顿。
2. 静态提升
Vue 2：
- 所有节点（包括静态节点）每次都会重新渲染，浪费了性能。
Vue 3：
-
编译阶段对模板进行静态分析，将静态内容提升到渲染函数外部。
- 静态节点只生成一次，后续渲染直接复用。
- 动态节点的范围缩小，减少了计算开销。
3. Fragment 支持
Vue 2：
- 每个组件必须有一个根节点，无法直接处理多节点结构。
Vue 3：
- 支持 Fragment，组件可以返回多个节点，减少了额外的 DOM 包裹层，提升了性能和灵活性。
4. 编译优化
Vue 2：
- 模板编译时没有区分静态和动态内容，渲染时的 diff 需要逐一比较所有节点。
Vue 3：
-
模板编译增加了静态标记（Static Flag）。
PatchFlag：标记动态内容的类型和变化范围。- 更新时只对动态内容进行精确比较，跳过静态内容。
5. 列表节点对比（v-for 场景）
Vue 2 的问题：
- 当使用
v-for渲染列表时，如果未指定key，Vue 会尝试用默认逻辑比较节点，导致性能较低。 - 如果使用了
key，仍然是逐一比较所有节点，效率相对一般。
Vue 3 的改进：
- Vue 3 的双端比较更智能，列表变化时可以快速定位需要移动的节点。
- 在复杂场景（如列表部分更新、重新排序）下性能显著提升。
三、总结
| 特性 | Vue 2 | Vue 3 |
|---|---|---|
| 性能 | 较低，递归遍历所有节点 | 高，通过静态标记和优化算法提升 |
| 静态内容优化 | 不支持，每次更新重新生成所有节点 | 支持静态标记，跳过无变化的节点 |
| 列表 diff | 双端比较，效率一般 | 高效双端比较，优化复杂场景 |
| 编译优化 | 模板编译较简单 | 静态提升 + 动态标记 |
| 多节点支持 | 不支持 Fragment，需有根节点 | 支持 Fragment，减少额外 DOM 层级 |
