读Vue源码3---nextTick

为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，
并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，
只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。
然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，
如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

将回调函数推入callbacks，然后以微任务或宏任务的形式将callbacks中所有的callback推入任务队列中执行，

//  /*存放异步执行的回调*/
const callbacks = []

// 一个标记位，如果已经有timerFunc被推送到任务队列中去则不需要重复推送*/
let pending = false

 /*一个函数指针，指向函数将被推送到任务队列中，等到主线程任务执行完时，任务队列中的timerFunc被调用*/
let timerFunc

function nextTick (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)
    }
  })
  //将callbacks推入任务队列执行
  if (!pending) {
    pending = true
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

timerFunc

// 一共有Promise、MutationObserver\setImmediate以及setTimeout四种尝试得到timerFunc的方法

if (typeof Promise !== 'undefined' && isNative(Promise)) {
 const p = Promise.resolve()
 timerFunc = () => {
   p.then(flushCallbacks)
   if (isIOS) setTimeout(noop)
 }
 isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
 isNative(MutationObserver) ||
 MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
 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)
 }
 isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
 timerFunc = () => {
   setImmediate(flushCallbacks)
 }
} else {
 /*使用setTimeout将回调推入任务队列尾部*/
 timerFunc = () => {
   setTimeout(flushCallbacks, 0)
 }
}

flushCallbacks

function flushCallbacks () {
 pending = false
 // 拷贝一份callbacks
 const copies = callbacks.slice(0)
 // 将callbacks清空
 callbacks.length = 0
 for (let i = 0; i < copies.length; i++) {
   //执行所有的callback
   copies[i]()
 }
}