当前位置：首页 > VUE

vue $nexttick如何实现的

2026-02-21 21:12:43VUE

Vue $nextTick 的实现原理

Vue 的 $nextTick 方法用于在 DOM 更新后执行回调函数。其核心实现依赖于 JavaScript 的事件循环机制和微任务/宏任务的调度策略。

实现机制

Vue 内部会根据当前环境选择最优的异步任务调度方式：

优先使用微任务（Microtask），如 Promise.then 或 MutationObserver
降级使用宏任务（Macrotask），如 setImmediate 或 setTimeout

// 简化版的实现逻辑
if (typeof Promise !== 'undefined') {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
  }
} else if (typeof MutationObserver !== 'undefined') {
  // 使用MutationObserver
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

执行流程

当调用 $nextTick(callback) 时，回调函数会被推入一个回调队列
Vue 会检查是否已经有异步任务被调度
如果没有，则通过 timerFunc 调度一个异步任务
当前调用栈清空后，异步任务执行并依次调用队列中的所有回调

使用场景

this.message = 'updated'
this.$nextTick(() => {
  // 此时DOM已更新
  console.log(this.$el.textContent) // 获取更新后的DOM内容
})

注意事项

在同一个事件循环中多次调用 $nextTick，回调会被合并到同一个异步任务中执行
在组件生命周期钩子（如 mounted）中使用时，不需要额外调用 $nextTick，因为初始渲染已完成
在Vue 2.1.0+版本中，如果没有提供回调函数，$nextTick 会返回一个 Promise

与 Vue 3 的区别

Vue 3 中的 nextTick 直接基于 Promise 实现：

const resolvedPromise = Promise.resolve()
export function nextTick(fn?: () => void): Promise<void> {
  return fn ? resolvedPromise.then(fn) : resolvedPromise
}

vue $nexttick如何实现的