【Vue3】虚拟 DOM 和 diff 算法

虚拟 DOM

虚拟 DOM（Virtual DOM）是一个在前端开发中用于提高性能和优化渲染的概念。它最初由React框架引入，后来被其他前端框架和库采用。虚拟 DOM 是一个抽象的 DOM 树副本，通常是一个纯 JavaScript 对象，用于在内存中表示页面的结构和状态。

虚拟 DOM 的工作原理：

1. 初始化阶段：当应用程序加载时，会创建一个虚拟 DOM 树，这个树的结构与实际的 DOM 结构一一对应。每个 DOM 元素都由虚拟 DOM 节点表示。

2. 状态变更：当应用程序的状态（数据）发生变化，需要重新渲染页面时，不会直接操作实际的 DOM。相反，会先对比新的虚拟 DOM 树和之前的虚拟 DOM 树，找出它们之间的差异，这个过程叫做“虚拟 DOM 的协调”或“diff 算法”。

3. 差异计算：虚拟 DOM 会逐层比较，找出需要更新的部分。这些需要更新的部分包括新增的节点、删除的节点以及有变化的节点。

4. 更新实际 DOM：一旦找到了需要更新的部分，虚拟 DOM 将生成一系列 DOM 操作指令，然后批量更新实际的 DOM。这个过程通常更加高效，因为减少了直接操作 DOM 的次数。

虚拟 DOM 的优势：

1. 性能优化：虚拟 DOM 可以减少直接操作实际 DOM 的次数，从而提高页面渲染性能。通过批量处理 DOM 更新操作，可以减少浏览器的重排和重绘。

2. 跨平台兼容性：虚拟 DOM 不依赖于浏览器的实际 DOM 实现，因此可以在不同浏览器和平台上保持一致性。这有助于消除浏览器兼容性问题。

3. 简化开发：虚拟 DOM 提供了一种更抽象的方式来操作页面结构，使得前端开发更加容易理解和维护。它将组件化开发推向了前台，有助于构建模块化的应用。

4. 更好的可维护性：虚拟 DOM 可以让开发者专注于数据和组件的状态，而不必担心手动管理实际 DOM 的状态。这提高了代码的可维护性。

diff 算法

Diff 算法（差异算法）是虚拟 DOM 在更新实际 DOM 时的核心算法之一。它用于比较两棵虚拟 DOM 树，找出它们之间的差异，然后将这些差异应用到实际 DOM 中，从而实现高效的页面更新。下面是 Diff 算法的基本工作原理：

1. 比较两棵虚拟 DOM 树：Diff 算法会递归遍历两棵虚拟 DOM 树，一般来说，这两棵树是前后两次渲染的虚拟 DOM。算法会比较节点和节点之间的差异，包括节点的类型、属性和子节点。

2. 找出节点差异：在比较过程中，Diff 算法会找出以下几种类型的差异：

   • 节点类型不同：如果节点类型不同，说明需要替换该节点。
   • 节点属性不同：如果节点的属性不同，需要更新实际 DOM 上的属性。
   • 节点顺序不同：如果子节点的顺序不同，需要重新排列实际 DOM 上的子节点。
   • 节点内容不同：如果节点的文本内容不同，需要更新实际 DOM 上的文本内容。

3. 生成差异列表：Diff 算法将找到的差异记录在一个差异列表中，这个列表描述了需要对实际 DOM 进行哪些操作来使其与新的虚拟 DOM 一致。

4. 批量更新实际 DOM：最后，Diff 算法会根据差异列表中的信息，批量更新实际 DOM。这可以通过最小化 DOM 操作来提高性能，因为 DOM 操作通常是较昂贵的操作。

Diff 算法的优化策略：

为了提高 Diff 算法的效率，一些优化策略被引入：

1. 基于节点的唯一标识：为每个节点分配唯一的标识符（key），这有助于算法在两次渲染中快速定位相同的节点，而不必遍历整棵树。

2. 提前中断遍历：一旦算法发现某个子树完全一致，就可以提前中断对该子树的遍历，从而减少不必要的比较。

3. 批量更新：Diff 算法不立即更新实际 DOM，而是将差异记录在队列中，然后一次性更新。这减少了浏览器的重排和重绘。

4. 同级比较：在进行比较时，算法会首先比较同级节点，而不是跨级比较。这有助于提高效率。