Vue源码小问答二：Vue.nextTick的用法

Vue.nextTick

官方说明

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

注解

Vue的Dom树更新一般是在异步回调中完成的，这里的异步回调可能用promise或者setTimeout。这就导致我们无法以同步的方式获取更新后的Dom结构，因为在数据状态更新完成之后Vue并不是立即更新Dom树，而是在下一个事件循环中更新。（不要问我问什么要做异步，文档里说的很清楚）

Vue会在完成Dom更新后调用Vue.nextTick，所以这个可以获取到更新后的Dom。

nextTick是一个全局方法，也就是所有的Vue实例都会在统一的地方处理。这个方法主要是在数据状态发生变化后调用，例如data的变化、mutation调用之后等。例如页面上有Vue实例a、b，js对这两个实例的data进行修改后分别调用了vue.nextTick，在页面完成dom更新后两个回调函数会以此被调用。

源码解毒：请看中文注释部分

export const nextTick = (function () {
  // 存放一次dom更新循环内所有的回调函数
  const callbacks = []
  // 在一次dom更新循环内timerFunc方法只能被调用一次
  let pending = false
  let timerFunc

  function nextTickHandler () {
    pending = false
    const copies = callbacks.slice(0)
    callbacks.length = 0
    for (let i = 0; i < copies.length; i++) {
      copies[i]()
    }
  }

  // 在eventloop大循环中插入回调
  if (typeof Promise !== 'undefined' && isNative(Promise)) {
    var p = Promise.resolve()
    var logError = err => { console.error(err) }
    timerFunc = () => {
      p.then(nextTickHandler).catch(logError)

      if (isIOS) setTimeout(noop)
    }
  } else if (typeof MutationObserver !== 'undefined' && (
    isNative(MutationObserver) ||
    // PhantomJS and iOS 7.x
    MutationObserver.toString() === '[object MutationObserverConstructor]'
  )) {
    // use MutationObserver where native Promise is not available,
    // e.g. PhantomJS IE11, iOS7, Android 4.4
    var counter = 1
    var observer = new MutationObserver(nextTickHandler)
    var textNode = document.createTextNode(String(counter))
    observer.observe(textNode, {
      characterData: true
    })
    timerFunc = () => {
      counter = (counter + 1) % 2
      textNode.data = String(counter)
    }
  } else {
    // fallback to setTimeout
    /* istanbul ignore next */
    timerFunc = () => {
      setTimeout(nextTickHandler, 0)
    }
  }

  return function queueNextTick (cb?: Function, ctx?: Object) {
    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, reject) => {
        _resolve = resolve
      })
    }
  }
})()