跳到主要内容

scheduler

Vue 3 中的调度器（scheduler）是其响应式系统的核心部分之一，负责优化和管理异步更新，以提高应用的性能和响应速度。与 Vue 2 类似，Vue 3 的调度器确保组件的更新是异步和批量进行的，但它利用了 Vue 3 响应式系统的新特性和改进来实现更高效的更新策略。

异步更新​

在 Vue 3 中，当响应式数据变化时（例如，通过 reactive 或 ref 修改数据），视图的更新不会立即执行。相反，这些更新会被加入到一个异步队列中。

Vue 3 的调度器会在适当的时机批量执行这个队列中的更新任务，通常是在所有同步任务完成后的微任务队列中。这种机制有助于避免不必要的重复渲染和计算，提高应用性能。

微任务队列​

Vue 3 的调度器使用 JavaScript 的微任务（microtask）队列来管理异步更新。微任务队列的特点是在当前宏任务（包括 DOM 渲染）完成后、下一个宏任务开始前执行。Vue 3 通常通过 Promise.then 或 queueMicrotask API 将更新任务加入微任务队列。

nextTick​

Vue 提供了 nextTick 函数，允许开发者在所有当前队列的 DOM 更新完成后执行回调。这对于需要在 DOM 更新后执行操作的场景非常有用。

异步队列的处理​

[响应式数据变化]
       ↓
[更新任务加入队列]
       ↓
[去重处理]
       ↓
[任务排序]
       ↓
[异步执行]
       ↓
[DOM 更新]
       ↓
[`nextTick` 回调执行]

Vue 3 的调度器会在每个事件循环的末尾（通常是通过微任务队列）处理这个异步队列，具体步骤如下：

  1. 响应式数据变化：
  • 响应式数据（由 reactive 或 ref 创建）发生变化。
  1. 更新任务加入队列：
  • 数据变化导致的组件更新任务（或副作用函数）被加入到异步队列中。
  1. 去重处理：
  • 如果同一组件的更新任务在同一事件循环中多次加入，队列会进行去重，确保每个组件只更新一次。
  1. 任务排序：
  • 队列中的任务按父子组件的顺序进行排序，保证更新的顺序性和一致性。
  1. 异步执行：
  • 事件循环的微任务阶段执行异步队列中的所有更新任务。
  1. DOM 更新：
  • 执行组件的渲染函数，计算新的虚拟 DOM，并应用必要的 DOM 更新。
  1. nextTick 回调执行：
  • 所有更新完成后，执行通过 nextTick 注册的回调函数。