《Vue 源码系列》之 nextTick 源码

Vue.nextTick(()=>{
  // DOM 更新后的逻辑
})
this.$nextTick(()=>{
  // DOM 更新后的逻辑
})

async getData(){
  await this.$nextTick();
  // DOM 更新后的逻辑
}

this.$nextTick().then(()=>{
  // DOM 更新后的逻辑，不传回调函数，默认会返回一个 Promise
})

export let isUsingMicroTask = false
const callbacks = []
let pending = false

export 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)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()
  }
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

let timerFunc
// 虽然 MutationObserver 支持度比 Promise 更高，但它在iOS系统（ >= 9.3.3）中，触发 touch 事件时会有严重 bug,
// 多次触发甚至会导致无响应，所以优先使用 Promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  // <微任务> 使用原生 Promise
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    // 但在部分IOS系统里，微任务队列不会及时清空，所以手动加个计时器清一下
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) || MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // <微任务> 不支持原生 Promise 则用 MutationObserver 代替，但是它在 IE11 中不可靠
  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)) {
  // <宏任务> 不支持 MutationObserver 则用 setImmediate 代替，虽然是宏任务，但效率优于 setTimeout
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // <宏任务>都不支持就只能用 setTimeout 代替
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

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

// Here we have async deferring wrappers using microtasks.
// In 2.5 we used (macro) tasks (in combination with microtasks).
// However, it has subtle problems when state is changed right before repaint
// (e.g. #6813, out-in transitions).
// Also, using (macro) tasks in event handler would cause some weird behaviors
// that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109).
// So we now use microtasks everywhere, again.
// A major drawback of this tradeoff is that there are some scenarios
// where microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690, which have workarounds)
// or even between bubbling of the same event (#6566).