Vue nextTick 源码解析与原理探索

2023-12-26 15:50:10

nextTick是什么？

nextTick是Vue.js中的一个内置方法，用于将一个回调函数排入下一个"微任务"队列中执行。当Vue需要在稍后执行一些操作时，例如在DOM更新后或在异步数据请求完成后，就会使用它。

nextTick的源码解析

Vue.prototype.$nextTick = function (callback) {
  if (!callbacks) {
    callbacks = [];
    pending = true;
    scheduleFlush();
  }
  callbacks.push(callback);
};

function scheduleFlush() {
  if (!pending) {
    pending = true;
    queue.push(flushCallbacks);
    queueFlush();
  }
}

function queueFlush() {
  if (!queued) {
    queued = true;
    Promise.resolve().then(flushCallbacks);
  }
}

function flushCallbacks() {
  pending = false;
  var copies = callbacks.slice(0);
  callbacks.length = 0;
  for (var i = 0; i < copies.length; i++) {
    copies[i]();
  }
}

原理分析

nextTick的原理是利用浏览器的微任务队列 ，浏览器在执行完当前正在执行的任务后，会执行微任务队列中的所有任务，然后才是宏任务队列中的任务。nextTick就是将回调函数放入微任务队列中，等待浏览器执行完当前正在执行的任务后，再执行回调函数。

示例

// 在下一个"微任务"队列中执行一个回调函数
Vue.nextTick(() => {
  // DOM更新后执行的操作
});

// 在异步数据请求完成后执行一个回调函数
axios.get('data.json').then(() => {
  Vue.nextTick(() => {
    // 数据请求完成后执行的操作
  });
});