异步事件优先级：Promise > MutationObserver > setImmediate > setTimeout

  1. // 是否使用了微任务来处理异步更新
  2. export let isUsingMicroTask = false
  4. // 更新队列
  5. const callbacks = []
  6. // 是否正在等待开启更新中，当 pending 为 false 时，意味着异步更新队列已经为空，并且下一个事件循环没有更新任务
  7. let pending = false
  9. // 更新函数
  10. // 一旦执行更新，则直接清空队列，并取其浅拷贝进行更新
  11. function flushCallbacks () {
  12.   pending = false
  13.   const copies = callbacks.slice(0)
  14.   callbacks.length = 0
  15.   for (let i = 0; i < copies.length; i++) {
  16.     copies[i]()
  17.   }
  18. }
  20. // 异步函数
  21. let timerFunc
  23. // 1. 如果当前环境有 Promise，则使用 Promise 当异步更新函数
  24. // 2. 如果不是 IE 且支持 MutationObserver，则使用 MutationObserver 的回调函数作为异步更新函数
  25. // 3. 如果支持 setImmediate，则使用 setImmediate 作为异步更新函数
  26. // 4. 最下策，使用 setTimeout 作为一部更新函数
  27. if (typeof Promise !== 'undefined' && isNative(Promise)) {
  28.   const p = Promise.resolve()
  29.   timerFunc = () => {
  30.     p.then(flushCallbacks)
  31.     // 再 IOS webview，会出现一些奇怪的情况，级微任务队列未刷新，解决这个问题的方法就是注册一个空的宏任务
  32.     if (isIOS) setTimeout(noop)
  33.   }
  34.   isUsingMicroTask = true
  35. } else if (!isIE && typeof MutationObserver !== 'undefined' && (
  36.   isNative(MutationObserver) ||
  37.   MutationObserver.toString() === '[object MutationObserverConstructor]'
  38. )) {
  39.   let counter = 1
  40.   const observer = new MutationObserver(flushCallbacks)
  41.   const textNode = document.createTextNode(String(counter))
  42.   observer.observe(textNode, {
  43.     characterData: true
  44.   })
  45.   timerFunc = () => {
  46.     counter = (counter + 1) % 2
  47.     textNode.data = String(counter)
  48.   }
  49.   isUsingMicroTask = true
  50. } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  51.   timerFunc = () => {
  52.     setImmediate(flushCallbacks)
  53.   }
  54. } else {
  55.   // Fallback to setTimeout.
  56.   timerFunc = () => {
  57.     setTimeout(flushCallbacks, 0)
  58.   }
  59. }
  61. export function nextTick (cb?: Function, ctx?: Object) {
  62.   let _resolve
  63.   // 将回调函数加入队列
  64.   callbacks.push(() => {
  65.     if (cb) {
  66.       try {
  67.         cb.call(ctx)
  68.       } catch (e) {
  69.         handleError(e, ctx, 'nextTick')
  70.       }
  71.     } else if (_resolve) {
  72.       _resolve(ctx)
  73.     }
  74.   })
  75.   // 如果当前是第一个入队的，则开启异步更新，并将 pending 置否
  76.   if (!pending) {
  77.     pending = true
  78.     timerFunc()
  79.   }
  80.   // 如果没有 cb，并且当前环境支持 Promise，则返回一个 Promise，resolve(ctx)
  81.   if (!cb && typeof Promise !== 'undefined') {
  82.     return new Promise(resolve => {
  83.       _resolve = resolve
  84.     })
  85.   }
  86. }

参考