深入分析 Vue 3 源码中 `scheduler` 队列的实现细节，它是如何批处理任务并利用浏览器的微任务队列确保 DOM 更新的最小化？

咳咳，大家好！今天咱们来聊聊 Vue 3 里一个很重要的家伙——scheduler。这玩意儿就像 Vue 3 的“任务调度员”，负责管理和执行各种更新任务。别看它名字挺严肃，其实它的核心目标很简单：高效地更新 DOM，尽量别让浏览器抽风！

咱们这次就深入它的源码，看看它到底是怎么运作的。顺便说一句，源码是最好的老师，准备好一起“读”源码了吗？

第一幕：任务的诞生——queueJob

首先，任何需要更新 DOM 的操作（比如修改数据、组件 props 更新等）都会被封装成一个“任务”。这些任务会被扔进 scheduler 的队列里。这个“扔”的动作，通常是由 queueJob 函数完成的。

// packages/runtime-core/src/scheduler.ts

const queue: (Job | null)[] = []; // 任务队列
let isFlushPending = false; // 是否正在刷新队列
const p = Promise.resolve(); // 用于创建微任务

export function queueJob(job: Job) {
  if (!queue.includes(job)) {
    queue.push(job);
    queueFlush();
  }
}

function queueFlush() {
  if (!isFlushPending) {
    isFlushPending = true;
    p.then(flushJobs);
  }
}

这段代码很简单：

queue：这就是我们的任务队列，是个数组，存放着待执行的任务 (Job)。Job 本质上就是一个函数。
isFlushPending：这是一个标志位，用来防止重复触发队列刷新。
p：一个 resolve 状态的 Promise，用来创建微任务。
queueJob(job)：核心函数，将任务 job 添加到队列中，并调用 queueFlush 来触发队列刷新。
queueFlush()：如果当前没有正在刷新队列，就设置 isFlushPending 为 true，然后使用 Promise.resolve().then(flushJobs) 创建一个微任务，将 flushJobs 函数放入微任务队列。

重点：Promise.resolve().then(flushJobs)

这里用到了 Promise.resolve().then()，这玩意儿会在当前宏任务结束后，创建一个微任务来执行 flushJobs。

为什么要用微任务？ 因为微任务会在浏览器渲染页面之前执行，这样我们可以尽可能地在一次渲染中完成所有的 DOM 更新，避免多次渲染造成的性能问题。

第二幕：队列的刷新——flushJobs

接下来，咱们来看看 flushJobs 函数，它负责真正执行队列中的任务。

// packages/runtime-core/src/scheduler.ts

let flushing = false;
let currentFlush: Job[] | null = null;
const pendingPostFlushCbs: Function[] = [];

function flushJobs() {
  if (flushing) return; // 防止递归刷新

  flushing = true;
  currentFlush = queue.slice(); // 复制队列，避免在执行过程中队列被修改
  queue.length = 0; // 清空队列

  try {
    currentFlush.sort((a, b) => getId(a!) - getId(b!)); // 按照任务 ID 排序

    for (let i = 0; i < currentFlush.length; i++) {
      const job = currentFlush[i];
      if (job) {
        callWithErrorHandling(job, null, ErrorCodes.SCHEDULER);
      }
    }
  } finally {
    currentFlush = null;
    flushing = false;
    isFlushPending = false;
    if (queue.length || pendingPostFlushCbs.length) {
      flushPostFlushCbs();
      flushJobs(); // 递归调用，确保所有任务都被执行
    }
  }
}

function flushPostFlushCbs() {
  if (pendingPostFlushCbs.length) {
    const cbs = [...pendingPostFlushCbs];
    pendingPostFlushCbs.length = 0;
    for (let i = 0; i < cbs.length; i++) {
      cbs[i]();
    }
  }
}

function getId(job: Job): number {
  return job.id == null ? Infinity : job.id;
}

这段代码有点长，咱们分段解释：

flushing：防止递归刷新，避免 flushJobs 在执行过程中又触发新的 flushJobs。
currentFlush：复制队列，这样即使在执行任务的过程中，又有新的任务被添加到 queue 中，也不会影响当前正在执行的队列。
queue.length = 0：清空队列，为后续的任务做准备。
currentFlush.sort((a, b) => getId(a!) - getId(b!))：按照任务的 ID 进行排序。这个ID代表任务的优先级。
for (let i = 0; i < currentFlush.length; i++) { ... }：循环执行队列中的每一个任务。
callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)：执行任务，并进行错误处理。
finally { ... }：无论执行过程中是否发生错误，都会执行 finally 块中的代码。
if (queue.length || pendingPostFlushCbs.length) { flushPostFlushCbs(); flushJobs(); }：如果还有未执行的任务或者 pendingPostFlushCbs 中还有回调函数，就递归调用 flushJobs，直到所有任务都被执行完毕。
flushPostFlushCbs()：执行 post-flush 回调函数。这些回调函数通常用于在 DOM 更新完成后执行一些操作。

重点：任务排序

currentFlush.sort((a, b) => getId(a!) - getId(b!)) 这行代码非常重要。getId(job) 函数会返回任务的 ID，这个 ID 通常代表任务的优先级。Vue 3 会根据任务的优先级来决定执行顺序。

举个例子，组件更新的任务通常会比用户自定义的回调函数的优先级更高，所以会先执行组件更新的任务，然后再执行用户自定义的回调函数。

第三幕：任务的优先级——watchEffect 的妙用

那么，任务的 ID（优先级）是如何确定的呢？通常，我们会在创建任务的时候指定它的 ID。比如，watchEffect 函数就允许我们指定回调函数的 flush 模式。

// packages/runtime/src/apiWatch.ts

export function watchEffect(
  effect: WatchEffect,
  options?: WatchOptions<boolean>
): WatchStopHandle {
  return doWatch(effect, null, options)
}

function doWatch(
  source: WatchSource | WatchSource[] | WatchEffect,
  cb: WatchCallback | null,
  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
): WatchStopHandle {
  const job: SchedulerJob = () => {
    if (cb) {
      // ...
    } else {
      // ...
      effect()
    }
  }

  if (__DEV__) {
    job.allowRecurse = !!options?.allowRecurse
    job.owner = currentRenderingInstance
  }

  let scheduler: SchedulerJobRunner

  if (flush === 'sync') {
    scheduler = job
  } else if (flush === 'post') {
    scheduler = () => queuePostRenderEffect(job, currentRenderingInstance)
  } else {
    // default: 'pre'
    scheduler = () => queueJob(job)
  }

  job.scheduler = scheduler
  // ...
}

在这段代码中，我们可以看到 flush 选项有三个可选值：

'sync'：同步执行，任务会立即执行。
'post'：在 DOM 更新完成后执行，任务会被添加到 pendingPostFlushCbs 数组中。
'pre' (default)：在 DOM 更新之前执行，任务会被添加到 queue 队列中。

不同的 flush 模式会影响任务的 ID：

Flush 模式	任务 ID	执行时机
`'sync'`	立即执行	同步执行
`'pre'`	默认优先级	DOM 更新之前
`'post'`	较低优先级	DOM 更新之后

重点：queuePostRenderEffect

如果 flush 模式是 'post'，任务会被添加到 pendingPostFlushCbs 数组中，而不是 queue 队列中。pendingPostFlushCbs 中的任务会在 DOM 更新完成后，由 flushPostFlushCbs 函数执行。

// packages/runtime-core/src/scheduler.ts
export function queuePostRenderEffect(
  fn: Function | Function[],
  suspense: SuspenseBoundary | null = null
): void {
  if (!isArray(fn)) {
    if (
      !pendingPostFlushCbs.includes(
        fn as Function & { __weh?: Function }
      )
    ) {
      pendingPostFlushCbs.push(fn as Function & { __weh?: Function });
    }
  } else {
    // ...省略数组情况
  }
  queueFlush();
}

第四幕：总结与思考

好了，咱们一口气把 Vue 3 scheduler 的核心流程过了一遍。简单总结一下：

任务通过 queueJob 添加到队列中。
queueFlush 函数创建一个微任务来执行 flushJobs。
flushJobs 函数从队列中取出任务，按照优先级排序后执行。
watchEffect 函数允许我们指定任务的 flush 模式，从而影响任务的优先级。
queuePostRenderEffect 函数用于将任务添加到 pendingPostFlushCbs 数组中，在 DOM 更新完成后执行。

Vue 3 scheduler 的核心思想是：

批量更新： 将多个更新任务合并成一次 DOM 操作，减少浏览器的重绘和重排。
异步更新： 利用微任务队列，在浏览器渲染页面之前完成所有的 DOM 更新。
优先级控制： 允许我们控制任务的执行顺序，确保重要的任务优先执行。

一些思考：

scheduler 的实现非常精巧，充分利用了浏览器的微任务队列。
任务的优先级控制非常重要，可以避免一些不必要的性能问题。
理解 scheduler 的工作原理，可以帮助我们更好地优化 Vue 3 应用的性能。

最后的最后， 源码的世界充满了惊喜，希望这次的“源码探险”能让你对 Vue 3 的 scheduler 有更深入的了解。记住，多看源码，多思考，你也能成为 Vue 3 大师！

今天就到这里，谢谢大家！

发表回复 取消回复

发表回复取消回复