Vue 的异步更新机制

this.a = 1
this.b = 2
this.c = 3
this.a = 5
this.a = 6

var circular = {} // 开发环境检测循环引用
var queue = [] // watcher 队列
var activatedChildren = []
var has = {} // 是否已经加入队列
var waiting = false // 可以理解为是否在等待 flushing
var flushing = false // 是否已经开始处理队列
var index = 0 // 队列当前运行到哪里

function queueWatcher(watcher) {
  var id = watcher.id
  if (has[id] == null) {
    has[id] = true // 标记 watcher 已添加到队列
    if (!flushing) {
      // 队列还没开始更新，直接推入队列即可
      queue.push(watcher)
    } else {
      // 队列正在处理中时，Vue 的做法是直接把新的 watcher 插到运行到的最新位置
      // 这蕴含着隐藏逻辑
      // 已经在前面运行过的 watcher 这时候会立即再在下一个运行
      var 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)
    }
  }
}

function flushSchedulerQueue() {
  flushing = true
  var watcher, id

  queue.sort(function(a, b) {
    return a.id - b.id
  })

  // queue 可变长，queue.length 不能缓存
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index]
    id = watcher.id
    has[id] = null // 已经处理的 watcher 从 has 去除
    watcher.run()
  }

  // keep copies of post queues before resetting state
  var activatedQueue = activatedChildren.slice()
  var updatedQueue = queue.slice()

  resetSchedulerState() // 重置队列相关变量

  callActivatedHooks(activatedQueue)
  callUpdatedHooks(updatedQueue)
}

var nextTick = (function() {
  var callbacks = []
  var pending = false
  var timerFunc

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

  if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    timerFunc = function() {
      setImmediate(nextTickHandler)
    }
  } else if (
    typeof MessageChannel !== 'undefined' &&
    (isNative(MessageChannel) ||
      // PhantomJS
      MessageChannel.toString() === '[object MessageChannelConstructor]')
  ) {
    var channel = new MessageChannel()
    var port = channel.port2
    channel.port1.onmessage = nextTickHandler
    timerFunc = function() {
      port.postMessage(1)
    }
  } else if (typeof Promise !== 'undefined' && isNative(Promise)) {
    // use microtask in non-DOM environments, e.g. Weex
    var p = Promise.resolve()
    timerFunc = function() {
      p.then(nextTickHandler)
    }
  } else {
    // fallback to setTimeout
    timerFunc = function() {
      setTimeout(nextTickHandler, 0)
    }
  }

  return function queueNextTick(cb, ctx) {
    var _resolve
    callbacks.push(function() {
      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(function(resolve, reject) {
        _resolve = resolve
      })
    }
  }
})()

Vue.prototype.$nextTick = function(fn) {
  return nextTick(fn, this)
}