Vue——Diff算法

什么是Diff算法？

比较方式

1. 同层比较

2. 双端比较

双端比较的步骤：

3. 通过 key 来优化比较

原理分析

1. 虚拟 DOM 和真实 DOM

2. Diff 算法的基本原理

3. 双端比较优化

4. 通过 key 进行优化

5. 具体操作

6. 原理总结

声明，此博客中部分图示来自网络

什么是Diff算法？

Vue 的 diff 算法是一种高效的比较新旧虚拟 DOM 树（Virtual DOM）并更新真实 DOM 的机制。它通过尽量减少对 DOM 的操作来提高性能。以下是 diff 算法的关键概念：

虚拟 DOM：Vue 使用虚拟 DOM 来表示 UI。虚拟 DOM 是一个轻量级的 JavaScript 对象树，表示真实 DOM 的结构和内容。当数据发生变化时，Vue 通过虚拟 DOM 比较新旧状态，找到变化的地方。
同层比较：Vue 的 diff 算法只会比较同一层级的节点，不会跨层比较。这意味着当父节点不同，Vue 不会去比较它们的子节点，而是直接销毁旧的节点并创建新的节点。
双端比较：Vue 采用了一种优化策略，即从新旧虚拟 DOM 的两端同时进行比较，这称为 "双端比较"。它从头部和尾部同时进行比较，直到发现不匹配的节点，从而减少遍历的次数。
复用节点：当 Vue 发现新旧虚拟 DOM 中的节点相同（通过 key 属性判断），它会复用已有的 DOM 节点，而不是销毁旧的节点重新创建。这进一步提高了性能。
更新策略：Vue 会根据 diff 结果，生成最小化的 DOM 更新操作，更新真实 DOM。这种基于 diff 的更新策略可以减少不必要的 DOM 操作，从而提升页面的渲染效率。

Vue 的 diff 算法核心在于高效比较新旧虚拟 DOM 树的差异，并通过最小化 DOM 操作来更新 UI，提高渲染性能。

Vue 的 diff 算法只会在同一层级的节点中进行比较，而不会跨层进行比较。这样可以减少复杂度，因为不用递归遍历所有节点。它假设 DOM 结构的变化不会引发大的层级变动，主要会集中在同层次的节点变化上。

双端比较是一种优化策略，即 Vue 会同时从两边进行比较：既从头部（左端）开始，也从尾部（右端）开始。通过这种方式，它能更快地找到不匹配的节点。

在 diff 算法中，Vue 强烈建议为列表渲染的节点设置 key 属性，key 可以帮助 Vue 更精确地比较节点。没有 key 时，Vue 只能通过节点的顺序来匹配节点，但如果使用了 key，它会根据 key 值来复用、移动或删除节点，从而提高性能和渲染的正确性。

Vue 的 diff 算法的原理是基于虚拟 DOM的差异检测机制。通过比较新旧两棵虚拟 DOM 树，找到变化的地方，并仅对这些差异进行最小化的 DOM 操作，从而提高渲染效率。下面是 Vue diff 算法的工作原理：

虚拟 DOM：Vue 会先将页面的结构和内容生成一个虚拟 DOM（用 JavaScript 对象表示的树），当数据发生变化时，Vue 会根据新的数据生成新的虚拟 DOM。
比较新旧虚拟 DOM：每次组件的状态发生变化时，Vue 会对比新旧两棵虚拟 DOM 树，找出发生变化的部分，这个过程就是 diff。

Vue 的 diff 算法遵循以下原则：

Vue 的 diff 算法进行了一些优化，例如双端比较策略，它加快了节点查找速度：

头部比较：首先从新旧虚拟 DOM 的头部开始，逐一对比节点，如果相同就继续比较下一个节点。
尾部比较：如果头部没有匹配，就从尾部开始比较新旧 DOM。
头尾交叉比较：如果头尾都没有匹配，则 Vue 会检查新虚拟 DOM 的头部与旧虚拟 DOM 的尾部，或者新虚拟 DOM 的尾部与旧虚拟 DOM 的头部，寻找匹配的节点。

向中间靠拢

通过从两边同时进行比较，Vue 可以更快速地找到不匹配的节点，并减少遍历的次数。

key 的作用：在渲染列表（例如 v-for 渲染的列表）时，Vue 会建议开发者为每个列表项提供唯一的 key，这是为了帮助 Vue 更准确地跟踪每个节点的变化。没有 key 时，Vue 只能根据节点的位置去匹配，这可能导致不必要的节点更新。
key 的匹配规则：如果 key 相同，Vue 会认为这是同一个节点，并复用该节点。若 key 不同，则认为这是一个新节点，旧节点会被销毁，新节点会被创建。