浅谈Vuejs中nextTick()异步更新队列源码解析(2)

 我在注释中解释了nextTick()函数的逻辑

上面处理回调的三个方式的使用优先级的原因：因为Promise和MutationObserver和触发的事件在同一个事件循环里面(只不过是运行在微观队列里面)，但是setTimeout的回调函数是运行在下次时间循环里面。

优先使用Promise的原因是MutationObserver在ios9.3.3以上版本的UIWebview中运行一段时间后就停止了。
上面代码的注释已经完全说明了代码逻辑。简单理解：将callback 推到队列里面，如果还没有执行过在下次事件循环执行触发callback函数。

注意： 如果使用nextTick()不设置回调函数，而是使用Promise的方式设置回调函数，里面this并不是指向当前的Vue实例，而是指向window(严格模式是undefined)；
但是通过上面的分析可知：执行上下文是通过Promise.then()里的回调函数的第一个参数传递的。

nextTick()被使用的地方

1、他是全局Vue的一个函数，因此我们可以通过vue直接调用。

2、Vue系统中，用于处理dom更新的操作

Vue中有一个watcher，用于观察数据的变化，然后更新dom。前面我们就知道Vue里面不是每一次数据改变都会触发更新dom，而是将这些操作都缓存在一个队列，在一个事件循环结束之后，刷新队列，统一执行dom更新操作。

function queueWatcher (watcher) {
    var 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.
        var i = queue.length - 1;
        while (i >= 0 && queue[i].id > watcher.id) {
          i--;
        }
        queue.splice(Math.max(i, index) + 1, 0, watcher);
      }
      // queue the flush
      if (!waiting) {
        waiting = true;
        nextTick(flushSchedulerQueue);
      }
    }
  }

简单说明上面代码的逻辑，因为是watcher那里的代码，以后会分析到。这里nextTick()的作用，是在此次事件循环结尾的时候刷新watcher检查的dom更新操作。

3、局部Vue触发$nextTick()，在dom更新后执行相应逻辑。

Vue.prototype.$nextTick = function (fn) {
  return nextTick(fn, this)// 设置nextTick回调函数的上下文环境是当前Vue实例
};

上面是renderMinxin中的一段代码，也就是render模块初始化的代码。

总结

如果不了解它的代码，我们会产生理解误区。

1、nextTick()并不会重绘当前页面，并且它也不是在页面重绘才执行，而是在此次事件循环结束后一定会执行的。

2、此方法的触发并不是在页面更新完成才执行，第一条已经说了，但是为什么能在此方法中取到更新后的数据，那是因为dom元素的属性已经在watcher执行flush队列的时候改变了，因此是可以在此时获取的。