Vue 的 Diff 算法 是 Vue 用来高效更新页面的核心机制。它的作用是找出页面中哪些部分需要更新，然后只更新这些部分，而不是重新渲染整个页面。这样可以大大提升性能。为了更好地理解，我们可以把 Diff 算法比作"找不同"游戏：它对比新旧两个版本的页面结构，找出变化的地方，然后只修改这些地方。
1. 虚拟 DOM（Virtual DOM）
虚拟 DOM 是 Vue 用来描述页面结构的一种方式。它并不是真实的页面，而是一个轻量级的 JavaScript 对象，用来表示页面的样子。每次数据变化时，Vue 会生成一个新的虚拟 DOM，然后通过 Diff 算法对比新旧虚拟 DOM，找出需要更新的地方。
虚拟 DOM 的好处：
- 减少直接操作真实 DOM 的次数，提升性能。
- 可以跨平台使用（比如在服务器端渲染或移动端渲染）。
2. Diff 算法的核心思想
Vue 的 Diff 算法有以下几个核心思想：
-
只对比同一层级的节点：
- Vue 不会跨层级对比节点。比如，如果一个
div变成了span，Vue 会直接销毁旧的div，然后创建一个新的span。
- Vue 不会跨层级对比节点。比如，如果一个
-
使用
key标识节点：key是一个唯一的标识符，帮助 Vue 识别哪些节点可以复用。如果没有key，Vue 可能会错误地复用节点，导致页面显示不正确。
-
最小化操作：
- Vue 会尽量少地操作 DOM，只更新真正需要变化的部分。
3. Diff 算法的具体过程
Vue 的 Diff 算法主要分为以下几个步骤：
(1) 对比根节点
- 如果新旧虚拟 DOM 的根节点类型不同（比如从
div变成了span），Vue 会直接销毁旧节点，然后创建新节点。 - 如果类型相同，Vue 会继续对比它们的属性和子节点。
(2) 对比属性
- Vue 会对比新旧节点的属性（比如
class、style等），然后更新变化的属性。
(3) 对比子节点
子节点的对比是 Diff 算法的核心部分。Vue 采用了一种高效的策略：
-
双端对比：
- Vue 会从新旧子节点的两端开始对比，尝试找到可以复用的节点。
- 比如，先对比旧节点的第一个和新节点的第一个，如果相同，就复用；如果不相同，再对比旧节点的最后一个和新节点的最后一个，以此类推。
-
使用
key查找可复用的节点：- 如果双端对比找不到匹配的节点，Vue 会通过
key查找可以复用的节点。 - 如果没有
key，Vue 会直接创建新节点。
- 如果双端对比找不到匹配的节点，Vue 会通过
-
处理剩余节点：
- 如果旧节点有剩余，Vue 会删除多余的节点。
- 如果新节点有剩余，Vue 会创建新的节点。
4. Key 的重要性
key 是 Vue Diff 算法的关键。它帮助 Vue 识别节点的唯一性，从而更高效地复用节点。
-
没有
key的情况：- Vue 可能会错误地复用节点，比如在列表顺序变化时，页面显示可能会出错。
-
有
key的情况：- Vue 能够准确识别节点的移动、删除和新增，确保页面正确更新。
示例：
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>5. Diff 算法的优化
Vue 的 Diff 算法在以下方面进行了优化：
-
静态节点提升：
- Vue 3 会将不会变化的节点（比如纯文本）提升到渲染函数外部，避免重复对比。
-
Block Tree：
- Vue 3 引入了 Block Tree 的概念，将动态节点和静态节点分开处理，减少对比范围。
-
Patch Flags：
- Vue 3 使用 Patch Flags 标记节点的更新类型（比如属性、文本、子节点等），进一步减少对比次数。
6. Diff 算法的局限性
尽管 Diff 算法非常高效，但它也有一些局限性：
-
同级比较：
- 如果节点跨层级移动，Vue 会销毁旧节点并创建新节点，无法复用。
-
列表渲染的性能：
- 在列表渲染中，如果没有正确使用
key，可能会导致性能问题。
- 在列表渲染中，如果没有正确使用
7. 示例
以下是一个简单的 Diff 算法示例：
// 旧虚拟 DOM
const oldVNode = {
type: 'div',
children: [
{ type: 'p', key: 1, text: 'A' },
{ type: 'p', key: 2, text: 'B' },
{ type: 'p', key: 3, text: 'C' },
],
};
// 新虚拟 DOM
const newVNode = {
type: 'div',
children: [
{ type: 'p', key: 3, text: 'C' },
{ type: 'p', key: 1, text: 'A' },
{ type: 'p', key: 4, text: 'D' },
],
};
// Diff 过程
// 1. 对比根节点（类型相同）
// 2. 对比子节点
// - 通过 key 复用节点
// - 删除多余的节点（key=2）
// - 创建新节点（key=4）8. Vue 3 的 Diff 算法相比 Vue 2 做了哪些优化
1. 静态节点提升（Static Node Hoisting）
Vue 2 的问题：
- 在 Vue 2 中，每次渲染时，即使是静态节点（不会变化的节点），也会被重新创建和对比。
Vue 3 的优化：
- Vue 3 会将静态节点提升到渲染函数外部，避免重复创建和对比。
- 静态节点只在首次渲染时创建一次，后续渲染直接复用。
示例：
<div>
<p>静态文本</p> <!-- 静态节点 -->
<p>{{ dynamicText }}</p> <!-- 动态节点 -->
</div>- Vue 3 会将
<p>静态文本</p>提升到渲染函数外部，后续渲染时直接复用。
2. Block Tree 和 Patch Flags
Vue 2 的问题：
- Vue 2 的 Diff 算法会对整个虚拟 DOM 树进行全量对比，即使某些节点没有变化。
Vue 3 的优化：
- Vue 3 引入了 Block Tree 的概念，将动态节点和静态节点分开处理。
- 静态节点会被跳过，只对比动态节点。
- Vue 3 使用 Patch Flags 标记节点的更新类型（如属性、文本、子节点等），进一步减少对比次数。
Patch Flags 示例：
- 如果只有一个节点的文本内容变化，Vue 3 会通过 Patch Flags 标记，只更新文本内容，而不对比其他属性或子节点。
3. 更智能的节点复用
Vue 2 的问题：
- Vue 2 的 Diff 算法在复用节点时，可能会错误地复用节点（尤其是在没有
key的情况下）。
Vue 3 的优化：
- Vue 3 的 Diff 算法更加智能，能够更准确地识别节点的移动、删除和新增。
- 通过 Fragment 和 Teleport 等新特性，Vue 3 可以更好地处理复杂的节点结构。
4. 更高效的双端对比
Vue 2 的问题：
- Vue 2 的双端对比算法在某些情况下效率不高，尤其是在列表渲染时。
Vue 3 的优化：
- Vue 3 的双端对比算法更加高效，能够更快地找到可复用的节点。
- Vue 3 还引入了 最长递增子序列（LIS）算法，用于优化列表渲染时的节点移动。
最长递增子序列（LIS）算法：
- 在列表渲染中，Vue 3 会通过 LIS 算法找到最长的无需移动的节点序列，然后只移动其他节点，减少 DOM 操作。
5. 更细粒度的更新
Vue 2 的问题：
- Vue 2 的更新粒度较粗，即使只有一个小部分变化，也可能导致整个组件重新渲染。
Vue 3 的优化：
- Vue 3 的更新粒度更细，能够精确到单个节点或属性。
- 通过 Tree Shaking 和 按需更新，Vue 3 只更新真正变化的部分。
6. 更快的首次渲染
Vue 2 的问题：
- Vue 2 的首次渲染需要创建完整的虚拟 DOM 树，然后进行 Diff 对比。
Vue 3 的优化：
- Vue 3 的首次渲染更加高效，通过 编译时优化 和 静态节点提升，减少了首次渲染的开销。
7. 更好的 TypeScript 支持
Vue 2 的问题：
- Vue 2 的 Diff 算法和核心代码对 TypeScript 的支持不够友好。
Vue 3 的优化：
- Vue 3 完全使用 TypeScript 重写，Diff 算法的实现更加清晰和类型安全。
8.归纳
Vue 3 的 Diff 算法相比 Vue 2 做了以下优化：
- 静态节点提升：避免重复创建和对比静态节点。
- Block Tree 和 Patch Flags：只对比动态节点，减少对比范围。
- 更智能的节点复用：更准确地识别节点的移动、删除和新增。
- 更高效的双端对比：通过 LIS 算法优化列表渲染。
- 更细粒度的更新：精确到单个节点或属性。
- 更快的首次渲染：通过编译时优化减少首次渲染开销。
- 更好的 TypeScript 支持：代码更清晰、类型更安全。
这些优化使得 Vue 3 的渲染性能大幅提升，尤其是在大型应用中，能够显著减少不必要的计算和 DOM 操作。
总结
Vue 的 Diff 算法通过高效的节点对比策略，实现了最小化的 DOM 操作，从而提升了渲染性能。它的核心思想包括：
- 只对比同一层级的节点。
- 使用
key标识节点的唯一性。 - 尽量少地操作 DOM。
在实际开发中，合理使用 key 和避免不必要的节点更新，可以进一步提升 Vue 应用的性能。