Vue3.0 - 源码解读 - 调度系统

一、前言

vue3.0是如何对框架执行中的任务进行调度的呢？我们知道js是单线程的，如果所有任务都是一鼓作气的同步去执行，会导致主线程的阻塞，那么当你想在表单输入东西时，由于主线程被其他任务占据，所以你的输入任务是无法立即得到响应的。调度系统是为了解决这个问题。
vue的调度系统相对比较轻，并没有像react那样引入fiber这么重的调度算法（做了快两年），而是巧妙的运用了js微任务机制，将更新触发的任务放到一个微任务中，这样就保证在有大量更新任务时，主线程不会被阻塞，等主线程任务执行完毕后，微任务中的更新开始执行。

二、源码分析

先看下调度器声明的一些变量，相对于调度器本身来说，这些是全局变量，用于调度过程中的一些状态记录。

// 任务队列是否正在排空
let isFlushing = false
// 微任务已创建，任务队列等待排空
let isFlushPending = false

// 主任务队列，用于存储更新任务
const queue: (SchedulerJob | null)[] = []
// 当前正在执行的任务在主任务队列中的索引
let flushIndex = 0

// 框架运行过程中产生的前置回调任务，比如一些特定的生命周期
// 这些回调任务是在主任务队列queue开始排空前批量排空执行的
const pendingPreFlushCbs: SchedulerCb[] = []
// 当前激活的前置回调任务
let activePreFlushCbs: SchedulerCb[] | null = null
// 当前前置回调任务在队列中的索引
let preFlushIndex = 0

// 框架运行过程中产生的后置回调任务，比如一些特定的生命周期（onMounted等）
// 这些回调任务是在主任务队列queue排空后批量排空执行的
const pendingPostFlushCbs: SchedulerCb[] = []
// 当前激活的后置回调任务
let activePostFlushCbs: SchedulerCb[