在 vue 源码中学到的队列执行机制，咔咔牛-五八三

在Vue中源码中，用户使用的api在底层都会被解释为一个一个的任务，例如nextTick、watcher、computed等等，我们传入的回调函数都会被放入到一个队列中，然后在合适的时机执行；

而怎么判断这个队列中是否有数据需要执行？队列执行完毕后怎么清空队列？新任务如何加入队列？

今天就来看一下Vue的任务执行机制，来实现一个简单的任务队列，简化我们日常开发中的一些操作；

nextTick 怎么保证最后执行？

在我之前写的Vue源码解析系列中，有一篇文章是讲Vue的nextTick的实现原理的，这里就不再赘述了，有兴趣的可以去看看：【源码&库】Vue3 中的 nextTick 魔法背后的原理

在Vue中，例如nextTick我们使用都是如下：

nextTick(() => {
  console.log('nextTick')
})

在nextTick的背后，我们的回调函数最后其实是类似下面这样执行的：

// 伪代码

let queue = Promise.resolve();



const nextTick = (cb) => {
    queue = queue.then(cb);
};

而我们如果操作响应式数据的任务在Vue的背后类似如下面这样执行的：

// 伪代码

const count = ref(0);



// 依赖收集
effect(() => {
  console.log(count.value);
});

const effect = (cb) => {
  // 依赖收集
  queue.then(cb);
};

这样就可以保证nextTick一定在effect执行完毕之后执行，感兴趣的可以拿上面的代码尝试一下；

任务队列怎么实现？

上面的代码其实并没有任何队列的影子，只有一个Promise，队列的实现全靠Promise的特性，then可以注册多个回调函数，并且会按照注册的顺序执行；

而上面的伪代码只是说明怎么保证nextTick在最后执行，在Vue中是有一个专门的队列来存放这些任务的，完整伪代码如下：

let p = Promise.resolve();
const queue = [];



// job 就理解为一个函数即可
const queueJob = (job) => {
  queue.push(job);
  queueFlush();
};

const queueFlush = () => {
    p = p.then(flushJobs)
};


const flushJobs = () => {
    try {
        for (const job of queue) {
            job();
        }
    } finally {
        queue.length = 0;
    }
}

const nextTick = (cb) => {
    p = p.then(cb);
};

const effect = (cb) => {
    // 依赖收集
    queueJob(cb);
};

上面就是一个最小的Vue的队列执行，我们可以看到，每次执行完队列中的任务后，都会清空队列，这样就保证了每次执行的任务都是最新的；

而Vue中的任务队列是按JS的宏任务为批次来执行的，整体逻辑非常清晰：