当前位置：首页 > VUE

vue nexttrick实现

2026-03-07 11:41:59VUE

Vue nextTick 实现原理

Vue 的 nextTick 是一个用于延迟执行回调函数的工具方法，常用于 DOM 更新后执行某些操作。其核心实现依赖于 JavaScript 的事件循环机制。

基本用法

this.$nextTick(() => {
  // DOM 更新完成后执行
  console.log('DOM updated');
});

实现机制

Vue 内部通过微任务（microtask）或宏任务（macrotask）来实现异步队列的执行。优先使用微任务（如 Promise），在不支持的环境下回退到宏任务（如 setTimeout）。

const callbacks = [];
let pending = false;

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

let timerFunc;

if (typeof Promise !== 'undefined') {
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);
  };
} else if (typeof setImmediate !== 'undefined') {
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

function nextTick(cb, ctx) {
  let _resolve;
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx);
      } catch (e) {
        handleError(e, ctx, 'nextTick');
      }
    } else if (_resolve) {
      _resolve(ctx);
    }
  });
  if (!pending) {
    pending = true;
    timerFunc();
  }
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve;
    });
  }
}

关键点解析

任务队列：Vue 维护一个回调队列 callbacks，所有通过 nextTick 注册的回调都会加入这个队列。
异步执行：通过 timerFunc 实现异步执行队列，优先使用 Promise（微任务），其次是 setImmediate 或 setTimeout（宏任务）。
批量处理：使用 pending 标志位确保在同一事件循环中只执行一次异步任务。
Promise 支持：当不传回调时返回 Promise，便于使用 async/await 语法。