当前位置：首页 > VUE

vue $nexttick如何实现的

2026-01-21 05:43:57VUE

Vue $nextTick 的实现原理

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

基于微任务的异步队列

Vue 在内部维护一个回调队列，$nextTick 会将回调函数推入这个队列。Vue 会根据当前环境选择最优的异步调度方式：

Promise（首选）：现代浏览器支持的原生微任务 API，优先级最高。

vue $nexttick如何实现的

if (typeof Promise !== 'undefined') {
  const p = Promise.resolve()
  timerFunc = () => p.then(flushCallbacks)
}

MutationObserver：作为 Promise 的降级方案，同样是微任务。

let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, { characterData: true })
timerFunc = () => {
  counter = (counter + 1) % 2
  textNode.data = String(counter)
}

setImmediate：Node.js 环境的高效宏任务。

vue $nexttick如何实现的

if (typeof setImmediate !== 'undefined') {
  timerFunc = () => setImmediate(flushCallbacks)
}

setTimeout：最终的兼容性兜底方案。

timerFunc = () => setTimeout(flushCallbacks, 0)

执行流程

回调收集：调用 $nextTick(callback) 时，回调被推入 callbacks 数组。
异步触发：通过 timerFunc 调度 flushCallbacks 执行。
队列处理：flushCallbacks 会复制当前队列并依次执行所有回调，同时清空队列。

源码关键逻辑

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]()
  }
}

function nextTick(cb, ctx) {
  callbacks.push(() => {
    if (cb) cb.call(ctx)
  })
  if (!pending) {
    pending = true
    timerFunc()
  }
}