Vue 3源码极客之：`Vue`的`scheduler`：如何管理`effect`函数的执行顺序。

各位靓仔靓女，大家好！今天咱们来聊聊 Vue 3 源码里一个相当重要，又有点神秘的模块——scheduler，也就是调度器。这玩意儿直接关系到 Vue 组件如何高效地更新，以及 effect 函数的执行顺序。准备好了吗？咱们这就开始！

Part 1: effect 函数，Vue 的反应神经

在深入 scheduler 之前，我们得先搞清楚 effect 是啥。 简单来说，effect 函数就是 Vue 实现响应式的核心。你可以把它想象成一个“观察者”，它会观察某些数据（响应式数据），一旦这些数据发生变化，effect 函数就会自动执行。

看个例子：

import { reactive, effect } from 'vue';

const state = reactive({
  count: 0,
});

effect(() => {
  console.log(`Count is: ${state.count}`); // 首次执行
});

state.count++; // 触发 effect 再次执行

在这个例子中，effect 函数观察了 state.count。当 state.count 的值发生改变时，effect 函数就会重新执行，打印出新的值。

Part 2: 问题来了！effect 太多，谁先谁后？

想象一下，如果你的 Vue 组件里有很多 effect 函数，而且它们之间还可能相互依赖，那么问题就来了：这些 effect 函数应该按照什么顺序执行？如果顺序不对，可能会导致一些意想不到的 Bug，比如界面闪烁、数据不一致等等。

举个更复杂的例子：

import { reactive, effect } from 'vue';

const state = reactive({
  a: 1,
  b: 2,
});

effect(() => {
  console.log(`Effect 1: a = ${state.a}, b = ${state.b}`);
});

effect(() => {
  state.b = state.a * 2;
  console.log(`Effect 2: a = ${state.a}, b = ${state.b}`);
});

state.a++; // 触发所有 effect

在这个例子中，有两个 effect 函数。effect 2 会修改 state.b 的值，而 state.b 又被 effect 1 依赖。如果 effect 2 在 effect 1 之前执行，那么 effect 1 打印出来的 b 的值就是错误的。

所以，我们需要一个“调度员”来管理这些 effect 函数的执行顺序，确保它们按照正确的顺序执行，这就是 scheduler 的作用。

Part 3: scheduler 的基本原理：队列！

scheduler 的核心思想是使用一个队列来管理 effect 函数。当响应式数据发生变化时，与该数据相关的 effect 函数不会立即执行，而是被添加到队列中。然后，scheduler 会按照一定的策略，从队列中取出 effect 函数并执行。

这种机制有几个好处：

1. 批量更新： 可以将多次数据修改合并成一次更新，减少不必要的渲染。
2. 避免重复执行： 如果同一个 effect 函数在一次更新中被多次触发，scheduler 可以确保它只执行一次。
3. 控制执行顺序： 可以根据 effect 函数的优先级或者依赖关系，调整它们的执行顺序。

Part 4: Vue 3 的 scheduler 实现

Vue 3 的 scheduler 实现相对比较简洁，但功能非常强大。它主要包含以下几个部分：

1. queue： 一个数组，用于存储需要执行的 effect 函数。
2. pending： 一个布尔值，表示当前是否正在刷新队列。
3. queueJob(job)： 一个函数，用于将 effect 函数（或者更准确地说，是一个 job，后面会解释）添加到队列中。
4. flushJobs()： 一个函数，用于刷新队列，执行队列中的所有 effect 函数。

我们来模拟一下 Vue 3 scheduler 的简化实现：

let queue = [];
let pending = false;

function queueJob(job) {
  if (!queue.includes(job)) {
    queue.push(job);
    queueFlush(); // 确保队列被刷新
  }
}

function queueFlush() {
  if (!pending) {
    pending = true;
    Promise.resolve().then(() => { // 使用 Promise.resolve().then 模拟 nextTick
      flushJobs();
    });
  }
}

function flushJobs() {
  try {
    // 先排序，再执行，可以根据优先级排序
    queue.sort((a, b) => getId(a) - getId(b)); // 模拟排序，getId 返回 job 的 id
    for (let i = 0; i < queue.length; i++) {
      const job = queue[i];
      try {
        job(); // 执行 effect 函数
      } catch (e) {
        console.error(e); // 错误处理
      }
    }
  } finally {
    queue = [];
    pending = false;
  }
}

// 辅助函数，模拟获取 job 的 id
function getId(job) {
  return job.id || Infinity; // 假设 job 有 id 属性，数字越小优先级越高
}

export { queueJob };

// 使用示例
import { reactive, effect } from 'vue';
import { queueJob } from './scheduler';

let id = 0;
const state = reactive({
  a: 1,
  b: 2,
});

const effect1 = effect(() => {
  console.log(`Effect 1: a = ${state.a}, b = ${state.b}`);
});
effect1.id = 2;

const effect2 = effect(() => {
  state.b = state.a * 2;
  console.log(`Effect 2: a = ${state.a}, b = ${state.b}`);
});
effect2.id = 1; // 优先级更高

state.a++; // 触发所有 effect

// 在 Vue 内部，当 state.a 发生变化时，会调用 queueJob(effect1) 和 queueJob(effect2)
// 为了模拟，我们手动调用
queueJob(effect1);
queueJob(effect2);

在这个简化实现中，queueJob 函数负责将 effect 函数添加到队列中，并调用 queueFlush 函数来触发队列的刷新。queueFlush 函数使用 Promise.resolve().then 来模拟 nextTick，确保 flushJobs 函数在下一个事件循环中执行。flushJobs 函数负责从队列中取出 effect 函数并执行。

Part 5: job 是什么？不仅仅是 effect！

在 Vue 3 的 scheduler 中，我们添加到队列中的并不是直接的 effect 函数，而是一个 job。job 是一个包含 effect 函数的包装对象，它可以包含一些额外的属性，比如：

• id： 用于指定 job 的优先级。
• pre： 一个布尔值，表示 job 是否需要在其他 job 之前执行。
• active： 一个布尔值，表示 job 是否处于激活状态。
• computed: 一个布尔值，表示该 job 是否是计算属性的更新。

这些属性可以帮助 scheduler 更精细地控制 effect 函数的执行顺序。例如，我们可以使用 id 属性来指定 job 的优先级，让优先级更高的 job 先执行。

Part 6: nextTick 的作用：延迟更新

在上面的例子中，我们使用了 Promise.resolve().then 来模拟 nextTick。nextTick 的作用是延迟更新，它确保 flushJobs 函数在当前事件循环结束之后执行。

为什么要延迟更新呢？这是因为在一次事件循环中，可能会发生多次数据修改。如果每次数据修改都立即触发 effect 函数的执行，会导致不必要的渲染，影响性能。

通过使用 nextTick，我们可以将多次数据修改合并成一次更新，减少渲染次数，提高性能。

Part 7: Vue 3 源码中的 scheduler

说了这么多，咱们来看看 Vue 3 源码中 scheduler 的具体实现。 Vue 3 的 scheduler 相关代码主要集中在 packages/runtime-core/src/scheduler.ts 文件中。

核心函数如下：

// packages/runtime-core/src/scheduler.ts
const queue: (Job | null)[] = [];
let flushPending = false;

const resolvedPromise = /*#__PURE__*/ Promise.resolve() as Promise<any>;
let currentFlushPromise: Promise<void> | null = null;

export function nextTick<T = void>(
  this: any,
  fn?: (...args: any[]) => T,
  ctx?: object
): Promise<T> {
  const p = currentFlushPromise || resolvedPromise;
  return fn ? p.then(this ? fn.bind(this) : fn) : p;
}

export function queueJob(job: Job) {
  // the dedupe check is also used for perf reasons.
  // it is possible that multiple reactive effects invoke the same job, e.g.,
  // when a component is unmounted, a job may propagate to multiple nested
  // child components. it's an expensive op and we only want to do it if the
  // job is not already in the queue.
  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();
  }
}

function queueFlush() {
  if (!flushPending) {
    flushPending = true;
    currentFlushPromise = resolvedPromise.then(flushJobs);
  }
}

const RECURSION_LIMIT = 100;
function flushJobs() {
  flushPending = false;
  isFlushing = true;
  let job;

  try {
    // Sort queue before flush.
    // This ensures that:
    // 1. Components are updated from parent to child. (because parent is always
    //    created before the child so its render effect is pushed into the queue
    //    first)
    // 2. If a component is unmounted during a parent component's update,
    //    its update can be skipped.
    queue.sort(comparator);

    for (flushIndex = 0; flushIndex < queue.length && (!stop || stop()); flushIndex++) {
      job = queue[flushIndex];
      if (job) {
        callWithErrorHandling(job, null, ErrorCodes.SCHEDULER);
      }
    }
  } finally {
    flushIndex = 0;
    queue.length = 0;
    isFlushing = false;
    currentFlushPromise = null;
  }
}

这里面几个关键点：

• queue： 存放job的数组
• queueJob： 将job放入队列，做了去重判断，并且会调用queueFlush。
• queueFlush： 调用 Promise.resolve().then(flushJobs)，实现了 nextTick 的效果。
• flushJobs： 核心函数，将队列中的 job 排序后依次执行。排序规则由 comparator 函数定义，通常是按照组件的层级关系进行排序，保证父组件先于子组件更新。

Part 8: 总结

scheduler 是 Vue 3 实现高效更新的关键模块。它通过使用队列来管理 effect 函数的执行顺序，实现了批量更新、避免重复执行和控制执行顺序等功能。nextTick 的使用，则进一步优化了更新策略，减少了不必要的渲染，提高了性能。

希望今天的讲解对大家有所帮助！ 记住，理解了 scheduler，你就更接近 Vue 的核心了！