Vue是如何实现nextTick的？

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。

Vue.js 的 nextTick 函数是一个非常重要的功能，它用于延迟执行代码块到下次 DOM 更新循环之后。这在 Vue.js 的异步更新队列机制中非常有用，尤其是在你需要基于更新后的 DOM 来执行某些操作时。

实现原理

Vue.js 的 nextTick 的实现原理主要依赖于 JavaScript 的事件循环和微任务（microtask）或宏任务（macrotask）队列。Vue 使用了一种叫做“异步更新队列”的技术来优化 DOM 的更新。当你修改 Vue 组件的数据时，Vue 不会立即更新 DOM，而是将这些更新任务放入一个队列中，并在同一个事件循环的“下次迭代”中执行它们。这样做的好处是可以批量处理多次数据变化，只进行一次 DOM 更新，从而提高性能。

nextTick 函数允许你指定一个回调函数，这个回调函数会在 DOM 更新完成后被调用。Vue2和Vue3的实现有所不同。

Vue2的实现

Vue2通过判断浏览器环境，选择最适合当前环境的异步任务执行方式，以确保回调函数能够尽快执行，从而提高应用的响应速度和性能。

1. Promise（如果浏览器支持）：
   Vue 会检查是否支持 Promise，并尝试使用 Promise.resolve().then() 来安排回调函数在微任务队列中执行。这是因为微任务会在当前执行栈清空后立即执行，但在宏任务（如 setTimeout）之前。
2. MutationObserver：
   如果 Promise 不可用，Vue 会尝试使用 MutationObserver。MutationObserver API 用于在 DOM 树发生变化时异步执行回调函数。Vue 会创建一个文本节点作为观察目标，并在回调函数中调用你的 nextTick 回调函数。然后，它会改变这个文本节点的某些内容来触发 MutationObserver 的回调。
3. setImmediate：
   如果以上两者都不可用，Vue 会尝试使用 setImmediate（这是一个比 setTimeout 更快的 API，但在大多数环境中不可用）。
4. setTimeout：
   作为最后的回退选项，Vue 会使用 setTimeout 来安排回调函数在宏任务队列中执行。这是所有选项中最慢的，因为它会在浏览器重绘和重排之后执行。

源码：

var timerFunc; // 定时器函数
if (typeof Promise !== 'undefined' && isNative(Promise)) {
    var p_1 = Promise.resolve();
    timerFunc = function () { // 1.使用Promise.then()
        p_1.then(flushCallbacks);
        if (isIOS)
            setTimeout(noop);
    };
    isUsingMicroTask = true;
} else if (!isIE &&
    typeof MutationObserver !== 'undefined' &&
    (isNative(MutationObserver) ||
        MutationObserver.toString() === '[object MutationObserverConstructor]')) {
    var counter_1 = 1;
    var observer = new MutationObserver(flushCallbacks);
    var textNode_1 = document.createTextNode(String(counter_1));
    observer.observe(textNode_1, {
        characterData: true
    });
    timerFunc = function () { // 2.使用MutationObserver
        counter_1 = (counter_1 + 1) % 2;
        textNode_1.data = String(counter_1);
    };
    isUsingMicroTask = true;
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    timerFunc = function () { // 3.使用setImmediate
        setImmediate(flushCallbacks);
    };
} else {
    timerFunc = function () { // 4.使用setTimeout
        setTimeout(flushCallbacks, 0);
    };
}

function nextTick(cb, ctx) {
    var _resolve;
    callbacks.push(function () {
        if (cb) {
            try {
                cb.call(ctx);
            }
            catch (e) {
                handleError(e, ctx, 'nextTick');
            }
        }
        else if (_resolve) {
            _resolve(ctx);
        }
    });
    if (!pending) {
        pending = true;
        timerFunc(); // 执行定时器
    }
    // $flow-disable-line
    if (!cb && typeof Promise !== 'undefined') {
        return new Promise(function (resolve) {
            _resolve = resolve;
        });
    }
}

Vue3的实现

不知道是因为Promise的支持度高，还是Vue3不在兼容低版本的浏览器，Vue3直接使用了Promise.then()这个微任务来处理DOM更新后的回调。

源码：

const resolvedPromise = /* @__PURE__ */ Promise.resolve();
let currentFlushPromise = null;
function queueFlush() {
  if (!isFlushing && !isFlushPending) {
    isFlushPending = true;
    currentFlushPromise = resolvedPromise.then(flushJobs);
  }
}

function nextTick(fn) {
  const p = currentFlushPromise || resolvedPromise;
  return fn ? p.then(this ? fn.bind(this) : fn) : p;
}

查看源码可知，Vue3没有再向Vue2那样判断浏览器环境来选择异步任务执行方式，而是直接采用了Promise.then()方法。

好了，分享结束，谢谢点赞，下期再见。