React 和 Vue 都使用了虚拟 DOM 来提高前端性能，并采用 diff 算法 来高效更新 DOM。虽然两者在实现细节上有所不同，但核心思想和目标相似：在更新 DOM 时，只修改必要的部分，避免全量操作，从而提升性能。
1. 虚拟 DOM 的概念
虚拟 DOM 是一个轻量级的 JavaScript 对象，用于描述 DOM 结构。它是实际 DOM 的抽象表示，不直接操作真实 DOM。
工作流程：
- 使用 JavaScript 构建虚拟 DOM。
- 比较新旧虚拟 DOM（Diff 算法）。
- 将变化部分更新到真实 DOM。
2. Diff 算法的核心思想**
Diff 算法的目的是高效比较新旧虚拟 DOM 树之间的差异。其核心优化原则包括：
- 同层比较：只比较同一层的节点，不跨层比较（树的分层思想）。
- 标签对比：不同类型的节点（例如
<div>和<span>）直接替换，无需深度比较。 - 按需更新：尽量复用 DOM 节点，仅更新有变化的部分(
key用于标识节点，定位变化，提升列表对比性能)。
vue和react区别
1. 虚拟DOM
React 的虚拟 DOM
- 实现方式：React 使用自己设计的虚拟 DOM 数据结构，每次渲染都会生成一棵新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行 Diff 比较。
- 目标：React 更注重灵活性和通用性，适用于更广泛的场景（包括 React Native）。
- 全量 Diff：每次更新会生成一整棵新的虚拟 DOM 树，与旧树进行对比。
Vue 的虚拟 DOM
- 实现方式：Vue 使用
snabbdom库实现虚拟 DOM，通过模板编译生成优化后的虚拟 DOM。 - 目标：Vue 的虚拟 DOM 更加偏向于模板渲染场景，结合静态优化来提升性能。
- 局部更新：Vue 在模板编译阶段对静态节点进行标记，更新时仅处理动态节点。
2. diff算法
React 的diff算法
- 全量对比：
- 每次状态或属性更新，React 会生成一棵新的虚拟 DOM 树。
- 新旧虚拟 DOM 树通过 Diff 算法进行逐层对比。
Vue 的diff算法
- 双端比较（列表优化） ：Vue 的 Diff 算法在处理列表时使用双端比较，同时从新旧列表的两端向中间比较，效率更高。
- 静态节点优化：Vue 在编译模板时，会对静态节点进行标记，更新时跳过这些节点的比较，减少不必要的操作。
- 基于
snabbdom：Vue 的 Diff 算法实现于snabbdom库，更轻量化，但专注于模板渲染场景。
React为什么不用双端diff算法
因为在同一层级的fiber节点没有反向的指针，sibling是单向，只能从左到右遍历，所以双端diff实现不了
