Vue3源码精读04：Scheduler 调度器深度解析｜异步批量更新与任务队列源码全解

系列专栏：Vue3 源码精读连载

前置阅读： Vue3源码精读03：响应式核心依赖追踪机制

一、前言

上一篇我们彻底吃透了 track 依赖收集、trigger 派发更新的核心机制。我们知道：数据修改后，trigger会遍历执行所有收集到的副作用 effect。

这里会引出一个核心疑问：

如果我在同步代码中连续修改 10 次响应式数据：

ini 复制代码

state.num = 1
state.num = 2
state.num = 3
// ...连续多次赋值

按照基础 trigger 逻辑，会连续触发 10 次 effect 执行、10 次视图渲染。但在实际开发中，Vue 只会执行一次最终更新。

支撑 Vue3 异步批量更新、防抖渲染、任务优先级调度 的核心模块，就是 Scheduler 调度器。

调度器是响应式系统的性能优化中枢，它改写了 effect 的执行时机，将「数据变更立即执行」升级为「任务入队、去重排序、异步批量执行」。

本文将从问题根源、核心设计、队列机制、源码逐行解析、任务优先级、nextTick 联动，彻底吃透 Vue3 调度器底层原理。

二、为什么必须要有调度器？原生 trigger 的性能缺陷

在没有调度器的原始逻辑中，trigger 触发后会立即同步执行 effect.run() 。这种设计存在致命性能问题：频繁数据变更 → 频繁视图重渲染 → 极大性能浪费。

Vue3 组件更新、渲染函数、计算属性的执行，全部是副作用。如果每次数据修改都立即更新视图，页面会产生大量无效渲染。

因此 Vue3 对渲染 effect 做了调度劫持：

组件更新的 effect 不会直接执行 run，而是将任务交给 scheduler 调度函数，由调度器统一管控执行时机。

简单理解：trigger 只负责收集任务，Scheduler 负责排队、限流、批量执行任务。

三、Effect 调度核心改造：scheduler 配置项

在 ReactiveEffect 类中，存在核心配置项 scheduler。如果传入调度函数，trigger 触发时不会直接执行 effect.run()，而是执行 effect.scheduler()，将执行权交给调度器。

scss 复制代码

// 简化版 trigger 执行逻辑
if (effect.scheduler) {
  // 存在调度器：入队异步批量执行
  effect.scheduler()
} else {
  // 无调度器：立即同步执行（普通 effect）
  effect.run()
}

核心区分：

普通自定义 effect：无 scheduler，数据变更立即同步执行
组件渲染 effect：内置 scheduler，走调度器异步批量更新

这也是组件更新异步、自定义 effect 同步的底层根源。

四、Scheduler 核心队列架构

Vue3 调度器维护三套任务队列，严格区分执行时机，实现精准的任务优先级调度，所有更新任务统称为 Job。

4.1 三大任务队列分工

Pre 队列（前置任务） 组件更新前执行，对应 onBeforeUpdate，优先级最高
Queue 队列（主体任务） 核心渲染任务、组件更新 effect，业务核心更新逻辑
Post 队列（后置任务） 组件更新后执行，对应 onUpdated、nextTick 回调，优先级最低

完整执行顺序：Pre任务 => 主体渲染任务 => Post任务

4.2 核心全局变量

csharp 复制代码

// 主体任务队列：存储组件更新effect
const queue: SchedulerJob[] = []
// 是否正在刷新队列（执行中）
let isFlushing = false
// 当前执行任务下标
let flushIndex = 0

isFlushing 是调度器防抖的核心：标记队列是否正在执行，防止重复触发队列刷新。

五、核心源码逐行解析：queueJob 任务入队

queueJob 是调度器最核心的入队函数，所有组件更新任务都会进入该函数处理，核心能力：任务去重、区间过滤、异步推入队列。

scss 复制代码

export function queueJob(job: SchedulerJob) {
  // 去重逻辑：防止重复入队
  // 1. 队列为空 直接入队
  // 2. 队列正在刷新时，允许后续新增递归任务入队
  if (
    !queue.length ||
    !queue.includes(
      job,
      isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
    )
  ) {
    // 有序任务插入，保证父组件先更新、子组件后更新
    if (job.id == null) {
      queue.push(job)
    } else {
      queue.splice(findInsertionIndex(job.id), 0, job)
    }
    // 触发队列刷新
    queueFlush()
  }
}

5.1 核心去重逻辑解读

多次修改同一数据，会生成同一个更新 job。调度器通过 queue.includes 做任务去重，同一个渲染任务在一次更新周期内只会保留一次，彻底解决多次赋值多次渲染的问题。

同时针对队列刷新中的场景做兼容：正在执行队列时，允许递归任务从当前下标之后检索去重，避免合法递归更新被拦截。

5.2 有序插入原理

每个组件渲染 effect 都有唯一递增 id，父组件 id 小于子组件 id 。通过 findInsertionIndex 保证队列任务始终按 id 从小到大排序，严格遵循 父组件先更新、子组件后更新 的层级规则，避免子组件先更新被父组件覆盖的 bug。

六、异步触发核心：queueFlush 微任务调度

queueFlush 负责开启异步队列执行，是 Vue3 批量更新的异步开关，依托浏览器微任务实现延迟执行。

scss 复制代码

function queueFlush() {
  // 不在刷新状态，才开启微任务
  if (!isFlushing) {
    isFlushing = true
    // 微任务异步执行队列刷新
    queueMicrotask(flushJobs)
  }
}

6.1 为什么用微任务？

微任务会在当前宏任务执行完毕、DOM 渲染前执行。所有同步数据修改、任务入队都会在本轮宏任务完成，随后一次性批量执行所有更新任务，完美实现「同步收集、异步执行、批量更新」。

同时 isFlushing 锁保证：无论多少次入队，同一周期只会开启一次微任务。

七、最终执行：flushJobs 队列刷新全流程

flushJobs 是队列最终执行函数，负责按优先级批量执行所有任务，包含前置、主体、后置三段式执行逻辑。

scss 复制代码

function flushJobs() {
  try {
    // 1. 执行所有前置 Pre 任务
    flushPreFlushCbs()

    // 2. 按组件id排序，保证父先子后
    queue.sort((a, b) => getId(a) - getId(b))

    // 3. 遍历执行所有主体渲染任务
    for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
      const job = queue[flushIndex]
      if (job && !job.dirty) {
        job()
      }
    }
  } finally {
    // 4. 执行所有后置 Post 任务
    flushPostFlushCbs()

    // 清空队列、释放锁，开启下一轮更新周期
    queue.length = 0
    isFlushing = false
    flushIndex = 0
  }
}

7.1 完整执行链路

优先执行 Pre 前置回调，处理更新前置逻辑
重新排序队列任务，修正执行顺序，保证层级更新顺序
遍历执行所有渲染 job，完成视图批量更新
执行 Post 后置回调，执行更新收尾逻辑
清空队列、解锁状态，等待下一轮数据更新

八、联动理解：nextTick 底层原理

nextTick 并不是独立的定时器，而是复用调度器微任务队列。

数据更新的微任务、nextTick 的回调，会进入同一个微任务队列。因此 nextTick 可以保证：回调执行时，本轮数据更新、视图渲染已完成。

执行优先级：Pre任务 => 视图更新 => Post任务/nextTick

这也是为什么我们可以在 nextTick 中获取更新后的 DOM、最新视图状态。

九、问题解答

9.1 多次同步赋值，只渲染一次的原因

多次赋值会多次触发 trigger、多次调用 queueJob，但调度器通过 任务去重 + 微任务合并，同一周期内同一组件更新任务只会保留最后一次，最终只执行一次渲染。

9.2 为什么自定义 effect 是同步执行？

自定义 effect 没有内置 scheduler 调度函数，trigger 触发时直接执行 run，不走异步队列，因此立即同步执行。只有组件渲染 effect 开启了调度优化。

9.3 父组件优先更新的底层保障

组件 effect 拥有递增 id，父组件 id 更小，flushJobs 中会主动排序队列，保证父组件更新永远优先于子组件，规避层级渲染错乱问题。

9.4 nextTick 为什么能拿到最新 DOM？

nextTick 回调属于后置微任务，在组件渲染、DOM 更新的微任务之后执行，因此可以精准获取更新完成的视图。

十、全文总结

Scheduler 调度器是 Vue3 响应式系统的性能核心，完美解决了原生 trigger 即时执行的性能缺陷，核心要点汇总：

通过 scheduler 配置项接管渲染 effect 执行权，实现异步更新能力；
维护 Pre/Queue/Post 三级队列，实现任务精准优先级管控；
queueJob完成任务去重、有序入队，杜绝无效渲染；
queueFlush 依托微任务实现同步收集、异步批量执行；
nextTick 复用微任务队列，实现视图更新后精准回调。