浏览器事件循环与vue nextTicket的实现

import { noop } from 'shared/util'import { handleError } from './error'import { isIOS, isNative } from './env'// 所有的callback缓存在数组中const callbacks = []// 状态let pending = false// 调用数组中所有的callback，并清空数组function flushCallbacks () { // 重置标志位 pending = false const copies = callbacks.slice(0) callbacks.length = 0 // 调用每一个callback for (let i = 0; i < copies.length; i++) {  copies[i]() }}// Here we have async deferring wrappers using both microtasks and (macro) tasks.// In < 2.4 we used microtasks everywhere, but there are some scenarios where// microtasks have too high a priority and fire in between supposedly// sequential events (e.g. #4521, #6690) or even between bubbling of the same// event (#6566). However, using (macro) tasks everywhere also has subtle problems// when state is changed right before repaint (e.g. #6813, out-in transitions).// Here we use microtask by default, but expose a way to force (macro) task when// needed (e.g. in event handlers attached by v-on).// 微任务functionlet microTimerFunc// 宏任务fuctionlet macroTimerFunc// 是否使用宏任务标志位let useMacroTask = false// Determine (macro) task defer implementation.// Technically setImmediate should be the ideal choice, but it's only available// in IE. The only polyfill that consistently queues the callback after all DOM// events triggered in the same loop is by using MessageChannel./* istanbul ignore if */// 优先检查是否支持setImmediate，这是一个高版本 IE 和 Edge 才支持的特性（和setTimeout差不多，但优先级最高）if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { macroTimerFunc = () => {  setImmediate(flushCallbacks) }// 检查MessageChannel兼容性（优先级次高）} else if (typeof MessageChannel !== 'undefined' && ( isNative(MessageChannel) || // PhantomJS MessageChannel.toString() === '[object MessageChannelConstructor]')) { const channel = new MessageChannel() const port = channel.port2 channel.port1.onmessage = flushCallbacks macroTimerFunc = () => {  port.postMessage(1) }// 兼容性最好（优先级最低）} else { /* istanbul ignore next */ macroTimerFunc = () => {  setTimeout(flushCallbacks, 0) }}// Determine microtask defer implementation./* istanbul ignore next, $flow-disable-line */// 微任务用promise来处理if (typeof Promise !== 'undefined' && isNative(Promise)) { const p = Promise.resolve() microTimerFunc = () => {  p.then(flushCallbacks)  // in problematic UIWebViews, Promise.then doesn't completely break, but  // it can get stuck in a weird state where callbacks are pushed into the  // microtask queue but the queue isn't being flushed, until the browser  // needs to do some other work, e.g. handle a timer. Therefore we can  // "force" the microtask queue to be flushed by adding an empty timer.  if (isIOS) setTimeout(noop) }// promise不支持直接用宏任务} else { // fallback to macro microTimerFunc = macroTimerFunc}/** * Wrap a function so that if any code inside triggers state change, * the changes are queued using a (macro) task instead of a microtask. */// 强制走宏任务，比如dom交互事件，v-on （这种情况就需要强制走macroTask）export function withMacroTask (fn: Function): Function { return fn._withTask || (fn._withTask = function () {  useMacroTask = true  const res = fn.apply(null, arguments)  useMacroTask = false  return res })}export function nextTick (cb?: Function, ctx?: Object) { let _resolve // 缓存传入的callback callbacks.push(() => {  if (cb) {   try {    cb.call(ctx)   } catch (e) {    handleError(e, ctx, 'nextTick')   }  } else if (_resolve) {   _resolve(ctx)  } }) // 如果pending为false，则开始执行 if (!pending) {  // 变更标志位  pending = true  if (useMacroTask) {   macroTimerFunc()  } else {   microTimerFunc()  } } // $flow-disable-line // 当为传入callback，提供一个promise化的调用 if (!cb && typeof Promise !== 'undefined') {  return new Promise(resolve => {   _resolve = resolve  }) }}

export function queueWatcher (watcher: Watcher) { const id = watcher.id if (has[id] == null) {  has[id] = true  if (!flushing) {   queue.push(watcher)  } else {   // if already flushing, splice the watcher based on its id   // if already past its id, it will be run next immediately.   let i = queue.length - 1   while (i > index && queue[i].id > watcher.id) {    i--   }   queue.splice(i + 1, 0, watcher)  }  // queue the flush  if (!waiting) {   waiting = true   nextTick(flushSchedulerQueue)  } }}

getData(res).then(()=>{ this.xxx = res.data this.$nextTick(() => {  // 这里我们可以获取变化后的 DOM })})