Vue.nextTick用法和实现

1. 用法

引用我认为最官方的官方说法 (opens new window)

Vue.nextTick(callback?: () => void): Promise<void>

当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。 nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

使用示例

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>
<script>
export default {
  data: () => ({ count: 0 })
  methods: {
    async increment() {
      this.count++
      console.log(document.getElementById('counter').textContent) // DOM还未更新 0
      await nextTick(()=>console.log('DOM此时已挂载，在数据更新前作一些操作'))
      console.log(document.getElementById('counter').textContent) // DOM已更新 1
    }
  }
}
</script>

2. 实现

“ Talk is cheap, show me the code ”

Vue.nextTick = (() => {
  function createTimerFunc() {  // 在页面重排重绘之后执行
    // Promise.resolve.then -> MutationObserver -> setImmediate -> setTimeout 
    // 这些都是可以异步回调，异步队列里的任务是在同步任务执行完毕->浏览器重排重绘 之后才执行
    if (Promise) return () => Promise.resolve.then(flushCallbacks) // 满足绝大多数浏览器
    
    // 以下是兼容处理
    if (MutationObserver) { // 在监听的DOM改变后会执行回调
      let counter = 1
      let observer = new MutationObserver(flushCallbacks)
      let textNode = document.createTextNode(String(counter)) // 创建监听的文本节点
      observer.observe(textNode, { characterData: true })
      return () => {
        counter ^= 1
        textNode.data = String(counter)
      }
    }
    
    if (setImmediate) return () => setImmediate(flushCallbacks)
    if (setTimeout) return () => setTimeout(flushCallbacks)
  }
  let timerFunc = createTimerFunc()

  let callbacks = []
  let pending = false
  function flushCallbacks() { // 从回调队列里弹出回调函数，逐个执行
    pending = false
    while(callbacks.length) callbacks.shift()()
  }
  
  // 主程序
  return (cb) => {
    // 原理：在注册的异步回调函数被执行之前，往回调队列callbacks里push回调函数
    callbacks.push(cb)
    if (pending) return
    pending = true
    timerFunc()
  }
})()