为啥React 引入 Fiber 架构，但是 Vue 不需要类似架构？
答：因为 Vue 的响应式系统在组件级别进行更精确的依赖追踪，无需递归整个组件树来比对变化，而 React 需要 Fiber 来调度和拆分大型虚拟 DOM 树的递归diff任务，以避免阻塞主线程。
-
React 的更新机制：递归遍历与“全量虚拟 DOM Diff”倾向
- 基于状态变化的子树重渲染： 当 React 组件的状态 (
setState) 或属性 (props) 发生变化时，默认情况下，该组件及其整个子树都会重新渲染（调用render方法生成新的虚拟 DOM）。即使子组件自身的props没有变化。 - 递归协调过程： React 的协调（Reconciliation）过程是深度优先递归遍历虚拟 DOM 树，对比新旧树节点（Diffing），找出需要更新的真实 DOM。这个递归过程是同步且不可中断的。
- 问题： 对于大型应用或复杂组件树，一次状态变更可能导致生成和 Diff 一个巨大的虚拟 DOM 子树。这个同步递归过程会长时间占用主线程（JavaScript 是单线程的），阻塞用户交互、动画渲染等，导致界面卡顿（掉帧）。
- 基于状态变化的子树重渲染： 当 React 组件的状态 (
-
React 需要 Fiber 来解决的核心问题：
- 可中断渲染： Fiber 架构将虚拟 DOM 节点表示为 Fiber 节点（一个包含组件信息、输入/输出、副作用等的链表节点）。React 不再使用递归调用栈，而是构建了一个可中断的、基于链表的遍历过程（Fiber Tree 和 Work Loop）。React 可以暂停当前组件的渲染工作，去处理更高优先级的任务（如用户输入、动画），然后再回来继续。
- 时间切片： 结合可中断性，React 可以将一个大的渲染任务分割成多个小任务（时间片），在浏览器的空闲时间（通过
requestIdleCallback或 Scheduler）分批执行。这确保了主线程不会被长时间独占，浏览器有足够的时间响应用户交互和绘制，保持界面流畅。 - 优先级调度： Fiber 架构允许为不同的更新分配优先级（例如，用户输入 > 动画 > 数据加载）。高优先级的更新可以中断低优先级的更新，优先执行，保证关键交互的即时响应。
- 更细粒度的控制： Fiber 节点记录了大量信息，使得 React 能够更精细地控制组件的生命周期
-
Vue 的响应式系统与更新机制：细粒度依赖追踪
- 基于依赖追踪的响应式： Vue 的核心是其响应式系统（Vue 2 使用
Object.defineProperty，Vue 3 使用Proxy）。当数据被访问时（在data,computed,watch, 模板/渲染函数中），Vue 会自动追踪当前的依赖关系（哪个组件/计算属性/侦听器依赖于哪个数据属性）。 - 精确的组件级更新： 当响应式数据发生变化时，Vue 能够精确知道哪些组件依赖于这个变化的数据。只有这些被依赖的组件会被标记为“需要更新”（
dirty）。 - 异步批处理更新： Vue 会将同一事件循环中发生的所有数据变更收集起来，然后在下一次事件循环的微任务（Microtask）中批量执行更新。这避免了不必要的重复渲染。
- 高效的虚拟 DOM Diff： 当组件更新时，Vue 也会使用虚拟 DOM 进行 Diff 和更新真实 DOM。但由于更新是精确到组件级别的（只有
dirty的组件才会运行其渲染函数生成新的 vDOM），所以需要 Diff 的 vDOM 子树通常比 React 默认情况下的“全量子树重渲染”要小得多。
- 基于依赖追踪的响应式： Vue 的核心是其响应式系统（Vue 2 使用
总结对比表：
| 特性 | React (Fiber 前) | React (Fiber 后) | Vue (响应式 + 优化) |
|---|---|---|---|
| 更新触发 | setState/props 变化 | setState/props 变化 | 响应式数据变化 |
| 默认更新范围 | 组件及其整个子树 (可优化) | 组件及其整个子树 (可优化) | 依赖该数据的精确组件 |
| 更新过程 | 同步递归 (不可中断) | 异步可中断 (链表遍历，时间切片) | 异步批处理 (微任务) |
| 核心优化目标 | 解决大规模同步递归阻塞 | 实现可中断、时间切片、优先级调度 (并发) | 精确更新、减少不必要的计算/Diff |
| 依赖追踪 | 无 (需手动优化或使用 Context) | 无 (需手动优化或使用 Context) | 自动、细粒度依赖追踪 |
| 虚拟 DOM Diff 范围 | 较大 (通常整个变更组件的子树) | 较大 (通常整个变更组件的子树) | 较小 (仅 dirty 组件内部) |
| 编译优化 | 较少 (JSX 动态性高) | 较少 (JSX 动态性高) | 强 (模板静态分析，提升、标记、打平等) |
| 是否需要 Fiber | 是 (解决同步阻塞) | 是 (实现并发特性基础) | 否 (默认路径已高效，无同步递归阻塞问题) |
