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);
};