Vue 3源码极客之：`Vue`的`scheduler`：如何实现`flushJobs`和`queueJob`。

各位老铁，早上好！今天咱来聊聊 Vue 3 源码里一个非常核心，又有点儿神秘的模块：scheduler，也就是调度器。这玩意儿就像 Vue 的大脑，负责安排什么时候该干什么，保证咱写的代码能高效、流畅地跑起来。

今天要讲的就是它怎么实现 flushJobs 和 queueJob 这两个关键函数，让你彻底搞明白 Vue 是怎么安排这些更新任务的。准备好你的咖啡，咱们开整！

一、 啥是 scheduler？ 为啥要有它？

先来解决一个根本问题：为什么 Vue 需要一个调度器？

想象一下，如果没有调度器，你的组件里连续改了好几个数据，Vue 就得立刻、同步地更新 DOM 好几次。这得多费劲啊！而且，中间状态用户也看到了，体验肯定不好。

scheduler 的作用就是把这些更新攒起来，等合适的时候再批量更新。就像攒钱买大件，攒够了再出手，避免频繁的小额支出。这样做有几个好处：

1. 性能优化： 减少不必要的 DOM 操作，提高渲染效率。
2. 用户体验： 避免中间状态的闪烁，提供更流畅的界面。
3. 保证一致性： 在更新 DOM 之前，可以做一些额外的处理，比如生命周期钩子的调用。

二、 queueJob：把任务塞进队列

queueJob 的职责很简单：把一个更新任务（job）放进一个队列里，等待稍后执行。这个“job”通常就是一个函数，它负责更新组件的某个部分。

让我们看看 queueJob 的简化版代码：

let queue: any[] = [];
let flushing = false; //是否正在刷新队列
let pending = false; //是否正在等待刷新队列

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

function queueFlush() {
  if (!flushing && !pending) {
    pending = true;
    Promise.resolve().then(flushJobs);
  }
}

这段代码做了以下几件事：

• queue: 一个数组，用来存放待执行的 jobs。
• queue.includes(job): 检查这个 job 是否已经在队列里了。避免重复添加，保证每个 job 只执行一次。
• queue.push(job): 如果 job 不在队列里，就把它添加到队列尾部。先进先出（FIFO）原则，保证任务按照添加的顺序执行。
• queueFlush(): 负责触发 flushJobs 的执行。这里用了一个小技巧：Promise.resolve().then(flushJobs)。这意味着 flushJobs 会被放到微任务队列里，在当前宏任务执行完毕后执行。这样做可以保证在更新 DOM 之前，所有的同步代码都已经执行完毕。
• flushing: 防止在 flushJobs 执行过程中，又触发了新的 queueJob，导致无限循环。
• pending: 确保 flushJobs 只会被触发一次，即使在很短的时间内多次调用 queueJob。

重点：

• queueJob 并不会立即执行 job，而是把它放到队列里。
• Promise.resolve().then() 保证 flushJobs 在微任务队列中执行。

三、 flushJobs：从队列里取出任务并执行

flushJobs 是真正干活的函数。它从队列里取出 jobs，一个一个地执行。

下面是一个 flushJobs 的简化版代码：

function flushJobs() {
  flushing = true;
  pending = false;
  try {
    // 先排序，保证组件更新的顺序是父组件先于子组件
    queue.sort((a, b) => getId(a) - getId(b));

    for (let i = 0; i < queue.length; i++) {
      const job = queue[i];
      try {
        job(); // 执行 job
      } catch (e) {
        // 错误处理
        console.error(e);
      }
    }
  } finally {
    flushing = false;
    queue.length = 0; // 清空队列
  }
}

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

这段代码做了以下几件事：

• flushing = true;: 标记正在刷新队列，防止新的 job 被添加到队列中。
• pending = false;: 重置 pending 状态，允许下次触发 queueFlush。
• queue.sort((a, b) => getId(a) - getId(b)): 这是一个很重要的优化。Vue 会根据组件的更新顺序（通常是父组件先于子组件）对 jobs 进行排序。这样做可以避免一些不必要的 DOM 操作，提高渲染效率。getId 函数用于获取组件的 id，用于排序。如果 job 没有 id，则放到最后执行。
• for (let i = 0; i < queue.length; i++): 遍历队列，逐个执行 job。
• try...catch: 捕获 job 执行过程中可能发生的错误，防止整个更新过程崩溃。
• flushing = false;: 标记刷新队列完成，允许新的 job 被添加到队列中。
• queue.length = 0;: 清空队列，为下次更新做准备。

重点：

• flushJobs 会对 jobs 进行排序，优化更新顺序。
• try...catch 保证程序的健壮性。
• finally 块保证 flushing 和 queue 的状态正确重置。

四、 举个栗子：看 queueJob 和 flushJobs 怎么配合

假设我们有这样一个组件：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
      count.value++;
      count.value++;
    };

    onMounted(() => {
      count.value = 10;
    })

    return {
      count,
      increment,
    };
  },
};
</script>

当我们点击 "Increment" 按钮时，increment 函数会被调用，count.value 会被连续修改三次。如果没有 scheduler，Vue 可能会同步更新 DOM 三次，导致性能问题。

但是，有了 scheduler，情况就不同了：

1. 每次修改 count.value，都会触发一个更新 job。
2. queueJob 会把这个 job 添加到 queue 队列里。由于 increment 函数连续执行，所以会有三个相同的 job 被放入队列，但 queueJob 会检查，只会添加一次。
3. queueFlush 会被调用，但由于 flushing 为 false，所以会通过 Promise.resolve().then(flushJobs) 触发 flushJobs 的执行。
4. flushJobs 会从队列里取出这个 job，然后执行它。由于 count 是一个 ref 对象，所以这个 job 实际上会触发组件的重新渲染。
5. 组件重新渲染，count 的值会更新为最终的值（也就是加了 3 之后的值）。

这样，整个过程中，DOM 只会被更新一次，避免了不必要的性能损耗。

onMounted 也是类似。count.value = 10会被添加到任务队列，和increment中的任务一起执行。

五、 进阶：优先级、副作用刷新时机

上面的代码只是 scheduler 的一个简化版。实际上，Vue 的 scheduler 还要处理更复杂的情况，比如：

• 优先级： 不同的更新任务可能有不同的优先级。例如，用户交互相关的更新应该优先执行，而一些不重要的更新可以放到后面执行。Vue 允许你指定 job 的优先级，flushJobs 会根据优先级对 jobs 进行排序。
• 副作用刷新时机： Vue 的响应式系统允许你在数据变化时执行一些副作用，比如更新 DOM。scheduler 需要保证这些副作用在合适的时机执行，避免出现错误。
• 组件生命周期： Vue 的组件有多个生命周期钩子，scheduler 需要保证这些钩子在正确的时机被调用。

这些细节都体现在 scheduler 的具体实现中，但核心思想还是不变的：把更新任务攒起来，然后批量执行。

六、 总结：scheduler 的精髓

scheduler 是 Vue 3 源码中一个非常重要的模块，它负责管理更新任务的执行顺序，保证 Vue 应用的性能和用户体验。

• queueJob 负责把更新任务添加到队列里。
• flushJobs 负责从队列里取出任务并执行。

通过 queueJob 和 flushJobs 的配合，Vue 可以把多个更新任务合并成一个，避免不必要的 DOM 操作，提高渲染效率。

理解 scheduler 的工作原理，可以帮助我们更好地理解 Vue 的响应式系统，写出更高效的 Vue 代码。

七、灵魂拷问：

1. 如果 queueJob 里面不用 Promise.resolve().then(flushJobs)，直接同步调用 flushJobs 会有什么问题？
2. flushJobs 里的排序算法有什么作用？如果去掉排序，会影响程序的正确性吗？
3. Vue 3 的 scheduler 除了这里讲的，还有哪些更高级的特性？

希望今天的分享对你有所帮助。掌握了 scheduler，你就能更加自信地驾驭 Vue 这匹骏马，写出更流畅、更高效的代码。下次见！