vue nexttick实现

Vue 中 nextTick 的实现原理

Vue 的 nextTick 是一个用于在下次 DOM 更新循环结束之后执行延迟回调的工具方法。它利用了 JavaScript 的事件循环机制，确保回调在 DOM 更新完成后执行。

核心实现机制

Vue 的 nextTick 实现依赖于微任务（microtask）和宏任务（macrotask）的优先级。在现代浏览器中，优先使用 Promise（微任务），如果不支持则降级到 MutationObserver，最后使用 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 {
  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
    })
  }
}

使用场景

nextTick 主要用于在 Vue 更新 DOM 后执行某些操作。例如，在修改数据后立即操作 DOM 元素：

this.message = 'updated'
this.$nextTick(() => {
  // DOM 已更新
  console.log(this.$el.textContent) // 'updated'
})

异步更新队列

Vue 在更新 DOM 时是异步执行的。当数据变化时，Vue 开启一个队列，缓冲在同一事件循环中发生的所有数据变更。如果一个 watcher 被多次触发，只会被推入队列一次。在下一个事件循环“tick”中，Vue 刷新队列并执行实际工作。

nextTick 就是将回调函数添加到这个队列的末尾，确保在 DOM 更新完成后执行。