nextTick 的实现 #

// util/next-tick.js
function nextTick (cb, ctx) {
  let _resolve
  // 向callbacks队列中推入匿名函数
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handlerError(e)
      }
    } else if (_resolve) {
      // 不传回调函数，用promise实现
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true;
    timeFunc() //队列函数的触发
  }
  // nextTick 的链式调用实现
  if (!cb && typeof Promise !== undefined) {
    // 当前环境下有Promise
    return new Promise(resolve =>{
      // 在之后callbacks里的函数调用时候，就能将返回的promise实例resolve掉，执行then方法
      _resolve = resolve
    })
  }
}

// util/next-tick.js
let timeFunc
if (typeof Promise !== undefined && isNative(Promise)) {
  // 原生Promise，不是打polyfill的
  const p = Promise.resolve()
  timeFunc = () => {
    p.then(flushCallBacks)
  }
  isUsingMicroTask = true // 微任务队列标识
} else if (!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver))) {
  // 原生MutationObserver
  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)
  }
  // 通过创建一个文本节点，改变他的文本内容
  // mutationObserver 实例会因为文本更新，从而触发flushCallbacks
  isUsingMicroTask = true
} else if (typeof setImmediate !== undefined && isNative(setImmediate)) {
  // 不在以上两种原生微任务环境下，就降级使用宏任务来做nextTick
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}