Vue源码解析-nextTick原理

先看一下源码中关于nextTick的定义，摘自Vue 2.6.11。

var isUsingMicroTask = false;
var callbacks = [];
var pending = false;  //保存的状态

// 该函数执行缓存的回调函数，然后清空缓存数组
function flushCallbacks () {
    pending = false;
    var copies = callbacks.slice(0);
    callbacks.length = 0;
    for (var i = 0; i < copies.length; i++) {
      copies[i]();
    }
}

var timerFunc;

if (typeof Promise !== 'undefined' && isNative(Promise)) {
   // 如果浏览器有实现Promise， timerFunc由Promise来实现
  // 在有问题的UIWebViews中，Promise.then不会完全中断，但是它可能会陷入一种奇怪的状态，
  // 回调被推到微任务队列，但队列不会被刷新，直到浏览器需要做一些其他的工作，例如处理计时器。
  // 因此我们可以“强制”通过添加空计时器来刷新微任务队列。（作者注释）
    var p = Promise.resolve();
    timerFunc = function () {
      p.then(flushCallbacks);
      if (isIOS) { setTimeout(noop); }
    };
    isUsingMicroTask = true; // 标记为使用微任务
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
    isNative(MutationObserver) ||
    MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
     // 原生 Promise 没有的时候使用 MutationObserver，如 PhantomJS, iOS7, Android 4.4
    var counter = 1;
    var observer = new MutationObserver(flushCallbacks);
    var textNode = document.createTextNode(String(counter));
    observer.observe(textNode, {
      characterData: true
    });
    timerFunc = function () {
        counter = (counter + 1) % 2;
        textNode.data = String(counter);
    };
    isUsingMicroTask = true;  // 标记为使用微任务
  } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
   // 如果运行环境有实现setImmediate， 这是比setTimeout更好的选择(来自作者注释)
    timerFunc = function () {
      setImmediate(flushCallbacks);
    };
  } else {
    // 最后情况下使用 setTimeout 来实现
    timerFunc = function () {
      setTimeout(flushCallbacks, 0);
    };
}

 // 函数接受两个参数，第一个是回调函数，第二个是绑定的运行时。
function nextTick (cb, ctx) {
    var _resolve;
   // 将回调函数保存起来
    callbacks.push(function () {
      if (cb) {
        try {
          cb.call(ctx);
        } catch (e) {
          handleError(e, ctx, 'nextTick');
        }
      } else if (_resolve) { // 如果是异步Promise的回调函数， 就执行这个函数
        _resolve(ctx);
      }
    });
    if (!pending) { // 如果pending==true, 表示timerFunc已经被执行了，无需再timerFunc
      pending = true; // 已经
      timerFunc();  // 执行微任务或者宏任务去执行flushCallbacks函数
    }
    // 如果没有定义回调函数则返回一个Promise对象，这样可以实现then调用了
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise(function (resolve) {
        _resolve = resolve; // 保存这个函数到_resove, 在上文的回调函数里执行
      })
    }
}

然后将nextTick暴露给Vue

// 包装一下然后赋值给原型链上的$nextTick
Vue.prototype.$nextTick = function (fn) {
      return nextTick(fn, this)
}
/* 
   
 */
// 直接赋值给原型链上的 nextTick
Vue.nextTick = nextTick;

简单来讲： vue环境支持微任务的话，就使用微任务，否则使用宏任务。
在代码里，微任务有

1.Promise
2.MutationObserver

宏任务有

1.MessageChannel（2.6版本下使用）
2.setImmediate（IE11）
3.setTimeout

那么宏任务为什么不直接使用setTimeout这一种宏任务呢，原因就是setTimeout太慢了，HTML5中规定setTimeout的最小时间延迟是4ms，为了让 回调函数尽早调用, setImmediate, 这几个函数明显比setTimeout快。

所以 Vue.nextTick 有时候是微任务有时候是宏任务。
1、Vue 一般情况下使用的是微任务，因为新版本浏览都实现了Promise，只有但Chrome27，FireFox32，IE11及以下的浏览器不支持，它只能使用宏任务。
2、在绑定DOM 事件的时候，会使用宏任务， isUsingMicroTask标志就是起这个作用 。

在 Vue 2.4 之前都是使用的 microtasks(微任务)，但是 microtasks 的优先级过高，在某些情况下可能会出现比事件冒泡更快的情况，但如果都使用 macrotasks(宏任务) 又可能会出现渲染的性能问题。所以在新版本中，会默认使用 microtasks，但在特殊情况下会使用 macrotasks。比如 v-on。

参考：
双十一，打包半价理解Vue的nextTick与watcher以及Dep的蓝色生死恋？
Vue原理】NextTick - 源码版 之 宏微任务的抉择
【Vue原理】NextTick - 源码版 之 独立自身