vue nexttick 实现

Vue nextTick 实现原理

Vue 的 nextTick 是一个用于在下次 DOM 更新循环结束之后执行延迟回调的方法。它主要用于确保在 DOM 更新完成后执行某些操作。

核心实现机制

nextTick 的实现基于 JavaScript 的事件循环机制，利用微任务（microtask）或宏任务（macrotask）来延迟回调的执行。

Vue 会根据当前环境选择最合适的延迟策略：

• 优先使用 Promise（微任务）
• 降级到 MutationObserver（微任务）
• 再降级到 setImmediate（宏任务）
• 最后使用 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 MutationObserver !== 'undefined') {
  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)
  }
} 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
    })
  }
}

使用场景

1. 在数据变化后操作更新后的 DOM

   this.message = 'updated'
   this.$nextTick(() => {
   // DOM 现在已经更新
   })

2. 在组件中使用

   this.$nextTick().then(() => {
   // DOM 更新完成后的操作
   })

注意事项

• nextTick 返回一个 Promise，可以使用 async/await 语法
• 多次调用 nextTick 的回调会在同一个 tick 中执行
• 确保在正确的生命周期中使用，避免不必要的性能开销