Diff 算法
Vue 的 Diff 算法主要用于比较新旧虚拟 DOM 树的差异，并高效地更新实际的 DOM。Vue 采用了一种基于开销最小化的策略来执行更新操作。
特点
同层比较：Vue 的 Diff 算法只会比较同一层级的节点，不会跨层级比较。这种方式大大减少了比较的复杂度。
Key 的作用：在循环渲染列表时，建议为每个节点提供一个唯一的 key。key 的作用是帮助 Vue 识别节点的唯一性，从而更高效地更新 DOM。具有相同 key 的节点会被认为是相同的节点，Vue 会尝试复用这些节点。
四种基本操作：
- 创建（Create）：对于新节点，创建相应的 DOM 元素。
- 删除（Remove）：对于旧节点中不存在的新节点，移除相应的 DOM 元素。
- 更新（Update）：如果节点类型相同，更新节点的属性和子节点。
- 移动（Move）：如果节点的顺序发生变化，移动 DOM 元素到正确的位置。
双端比较：Vue 使用了一种双端比较的方法，从新旧节点的两端同时进行比较，这样可以快速找到变化的部分，减少不必要的比较。
递归更新子节点：当节点本身没有变化时，Vue 会递归地对子节点进行 Diff 操作。
Vue 的 Diff 算法是基于开销最小化原则设计的，尽量减少 DOM 操作以提高性能。通过合理使用 key 和优化组件结构，可以进一步提升 Vue 应用的性能。
原理
虚拟 DOM：
- Vue 通过创建虚拟 DOM（Virtual DOM）来表示真实 DOM 的结构。虚拟 DOM 是 JavaScript 对象的树形结构，它描述了 UI 的状态。
- 在数据变化时，Vue 会生成一个新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较。
同层比较：
- Vue 的 Diff 算法只比较同一层级的节点，不会跨层级进行比较。这种策略大大减少了比较的复杂度，从 O(n^3)降到 O(n)。
Key 的使用：
- 在列表渲染中，使用 key 来标识节点的唯一性。key 帮助 Vue 识别哪些节点是相同的，从而可以复用旧节点，而不是重新创建。
- 如果没有 key，Vue 会默认使用一种“就地复用”的策略，可能会导致不必要的 DOM 更新。
双端比较：
- Vue 的 Diff 算法采用了一种双端比较的方法，即从新旧节点的两端同时进行比较。
- 这种方法可以快速定位需要更新、删除或插入的节点，进一步优化性能。
Patch 过程：
- 在比较过程中，Vue 会生成一系列的 Patch（补丁），这些补丁描述了如何将旧的虚拟 DOM 更新为新的虚拟 DOM。
- 最后，Vue 将这些 Patch 应用到真实的 DOM 上，完成 UI 的更新。
递归更新：
- 如果某个节点被判定为需要更新，Vue 会递归地对子节点进行 Diff 操作，确保整个 DOM 树的更新是精确和高效的。
通过上述原理，Vue 的 Diff 算法能够在保持性能的同时，确保 UI 的变化得到正确的反映。这种算法设计使得 Vue 能够在大多数情况下提供流畅的用户体验。
Vue 2 和 Vue 3 关键区别
编译优化：
- Vue 3：引入了编译时优化，通过静态标记和提升（如静态节点提升、事件监听提升等），减少运行时的 Diff 计算。这意味着在编译阶段，Vue 3 可以识别哪些部分是动态的，哪些是静态的，从而减少不必要的 Diff 操作。
- Vue 2：没有类似的编译时优化，所有的 Diff 计算都在运行时进行。
Fragment 支持：
- Vue 3：支持 Fragment，这意味着一个组件可以返回多个根节点。这需要在 Diff 算法中处理多个根节点的情况。
- Vue 2：每个组件只能有一个根节点。
静态提升：
- Vue 3：通过静态提升，Vue 3 可以在渲染函数之外创建一次静态节点，然后在渲染时复用，减少了重新创建节点的开销。
- Vue 2：没有静态提升的特性，所有节点在每次渲染时都会重新创建。
更高效的 Diff 算法：
- Vue 3：对 Diff 算法进行了优化，特别是在处理长列表时，通过使用双端比较和快速路径（fast path）来减少不必要的比较。
- Vue 2：虽然也使用双端比较，但在处理某些复杂场景时，性能不如 Vue 3。
Proxy 替代了 defineProperty：
- Vue 3：使用 ES6 的 Proxy 来实现响应式系统，这使得 Vue 3 能够更精确地追踪数据变化，从而减少不必要的更新。
- Vue 2：使用 Object.defineProperty 来实现响应式，这种方法有一些局限性，比如不能检测到对象属性的添加或删除。
源码模块化：
- Vue 3：源码更加模块化，Diff 算法的实现也更加清晰和可维护。
- Vue 2：虽然源码也很清晰，但模块化程度不如 Vue 3。
总体来说，Vue 3 在 Diff 算法上进行了多方面的优化，使其在性能和灵活性上都有了显著的提升。