VUE的异步队列

VUE中有一个方法 nextTick，它的作用是将函数推到下一个事件循环再执行。我们在开发中经常用到它，比如某些操作要等页面渲染更新后再执行，这时候就用this.$nextTick()。同时vue内部也常用到它，比如监听数据变化时不会每次都触发更新，而是将更新任务放在一个异步队列中，最终只触发一次更新。
我们来模拟nextTick的实现原理，将其写成一个简化版本：

let callbacks = [];
let pending = false;
function nextTick(cb) {
    callbacks.push(cb);
    if (!pending) {
        pending = true;
        timeFunc();
    }
}
function timeFunc() {
    setTimeout(() => {
        flushQueue();
    }, 0)
}
function flushQueue() {
    const copies = callbacks.slice(0);
    // 之所以拷贝数组，是考虑某些情况下会有嵌套使用nextTick的场景
    // 若不拷贝，则嵌套的nextTick任务会被推入任务队列，在本次事件循环执行
    callbacks.length = 0;
    pending = false;
    copies.forEach(cb => cb());
}

console.log(1);
nextTick(() => {
    console.log(2);
    nextTick(() => console.log(3))
});
nextTick(() => console.log(4));
console.log(5);

// 打印顺序应该是 1 5 2 4 3

在node环境下直接运行，查看结果，和我们预期的一致：

image.png

VUE的异步队列

推荐阅读更多精彩内容