Vue.js 的 nextTick 实现

export function renderMixin(Vue: Class<Componenet>) {
  // ...
  Vue.prototype.$nextTick = function (fn: Function) {
    // 在 nextTick 内部实现了第二参数绑定为第一参数的 this 值
    return nextTick(fn, this)
  }
  // ...
}

export function nextTick(cb?: Function, ctx?: Object) {
  // ...
  callbacks.push(() => {
    if (cb) {
      try {
        // 绑定 this 对象
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // ...
}

created () {
  this.$nextTick(() => {/* 1 do something you like */})
  this.$nextTick(() => {/* 2 do something you like */})
  this.$nextTick(() => {/* 3 do something you like */})
}

// 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).
// ! 在 v-on 附加的事件监听器中，将使用 marcotask 来实现 nextTick
let microTimerFunc
let macroTimerFunc
let useMacroTask = false

// Determine microtask defer implementation.
/* istanbul ignore next, $flow-disable-line */
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) // 添加 noop 至 (marco)task queue
  }
} else {
  // fallback to macro
  // 在不支持 Promise 的浏览器中默认使用 macrotask queue 实现 nextTick
  microTimerFunc = macroTimerFunc
}

// 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.
/**
 * 优先使用 setImmediate，否则使用 MessageChannel，否则使用 setTimeout
 * MessageChannel 作为 setImmediate（宏任务异步回调）的备选
 * setImmediate 的性能优于 setTimeout，因为不必设置计时器；但存在兼容性问题
 */
/* istanbul ignore if */
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
} 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 = () => {
    // 向 channel.port1 发送信息，将会让 channel.port1 的 onmessage 回调注册为 (marco)task
    port.postMessage(1)
  }
} else {
  /* istanbul ignore next */
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

const channel = new MessageChannel()
const port = channel.port2
channel.port1.onmessage = flushCallbacks
macroTimerFunc = () => {
  // 向 channel.port1 发送信息，将会让 channel.port1 的 onmessage 回调注册为 (marco)task
  port.postMessage(1)
}

export function nextTick(cb?: Function, ctx?: Object) {
  // ...
  if (!pending) {
    pending = true // 保证当前 `event loop` 中仅有第一次调用创建执行队列

    // ! 执行传入的 cb 函数
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      // ! 为了避免不必要的多次 vnode 重绘，nextTick 默认使用 microtask 实现
      microTimerFunc()
    }
  }
  // ...
}

pending = true

// 执行容器中的 cb 回调函数
function flushCallbacks() {
  pending = false // 重置 pending
  const copies = callbacks.slice(0) // 获取副本
  callbacks.length = 0 // 重置 callbacks 容器
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

created () {
  // 多次使用箭头函数来保持 this 始终为 vue 实例
  this.$nextTick(() => { // fn1
    console.log('I am outer !')
    this.$nextTick(() => { // fn2
      console.log('I am nested !')
    })
  })
}

// execution context stack（抽象 `stack` 数据结构如下）
;[console.log('I am outer !')][flushCallbacks] // 输出 'I am outer !'，此时 callbacks 已经重置为 [] // 包含执行 console.log 和 this.$nextTick(fn2) 的执行语句

// microtask queue（抽象 `queue` 数据结构如下）
;[flushCallbacks]

// execution context stack（抽象 `stack` 数据结构如下）
;[this.$nextTick(fn2)][flushCallbacks] // 向 callbacks 中添加 fn2 函数，此时 callbacks 为 [fn2] // from microtask queue

// microtask queue（抽象 `queue` 数据结构如下）
;[flushCallbacks]

// execution context stack（抽象 `stack` 数据结构如下）
;[microTimerFunc][this.$nextTick(fn2)][flushCallbacks] // 即添加另外一个 microtask 到 microtask queue 中，即 flushCallbacks

// microtask queue（抽象 `queue` 数据结构如下）
;[flushCallbacks][flushCallbacks]

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick().then(function () {
  // DOM 更新了
})

export function nextTick(cb?: Function, ctx?: object) {
  let _resolve

  callbacks.push(() => {
    if (cb) {
      // ...
    } else if (_resolve) {
      // _resolve 为 resolve 函数或 undefined
      _resolve(ctx)
    }
  })

  if (!cb && typeof Promise !== 'undefined') {
    // 在未传入 cb 函数且执行环境支持 Promise 时，使用 _resolve 缓存 resolve 函数
    // 配合 callback.push() 使用可起到在未传入 cb 函数时，将返回一个 Promise 实例。
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}