前言：

本文需要一定的事件循环相关知识，想了解事件循环的小伙伴可以看 这里。

本文要弄明白下面两件事：

• $nextTick什么时候执行
• vue中nextTick与$nextTick区别

1.查看源码中的$nextTick方法

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

可以看到$nextTick调用的也是nextTick方法，只不过$nextTick默认绑定了this上下文，也就是Vue实例对象

2.下面查看nextTick方法

function nextTick(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(); } // $flow-disable-line if (!cb && typeof Promise !== 'undefined') {  return new Promise(function(resolve) {   _resolve = resolve;  }) }}

• callbacks 一个异步队列，传入的回调函数会被存储在这个数组内，等待时机执行
• if (!cb && typeof Promise !== 'undefined') 如果没有回调方法，并且当前环境支持Promise，那么nextTick返回的是一个Promise对象

3.查看timerFunc方法

if (typeof Promise !== 'undefined' && isNative(Promise)) { var p = Promise.resolve(); timerFunc = function() {  p.then(flushCallbacks);  //ios的UIWebViews中，回调推送到微任务队列后不会立即刷新，通过添加空定时器来强制刷新微任务队列  if (isIOS) {   setTimeout(noop);  } }; isUsingMicroTask = true;} else if (!isIE && typeof MutationObserver !== 'undefined' && (  isNative(MutationObserver) ||  // PhantomJS and iOS 7.x  MutationObserver.toString() === '[object MutationObserverConstructor]' )) { //如果支持MutationObserver 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)) { // but it is still a better choice than setTimeout. timerFunc = function() {  setImmediate(flushCallbacks); };} else { // Fallback to setTimeout. timerFunc = function() {  setTimeout(flushCallbacks, 0); };}

经过一系列的判断方法，用来判断当前执行环境到底支持哪种方法，可以看到最后timerFunc执行的都是flushCallbacks方法。

4.flushCallbacks方法

function flushCallbacks() { pending = false; var copies = callbacks.slice(0); callbacks.length = 0; for (var i = 0; i 

这个方法执行时，会将回调队列做一个浅拷贝，并且初始化这个队列，防止影响下次事件循环，接下来将浅拷贝后的数组进行循环并执行。

到这步，$nextTick方法就算执行完毕了。

总结：

nextTick与$nextTick方法基本一致，$nextTick方法默认绑定vue实例为上下文。nextTick上下文需要传入，若不传入则默认绑定为window。 $nextTick 方法执行时会判断当前执行环境是否支持Promise若支持则放入Promise.then()内，若不支持则判断是否支持MutationObserver，如果不支持的话则会判断是否支持setImmediate方法，否则的话会加入setTimeout中。

一次事件循环(event loop)的过程

宏任务 => 所有微任务 => ui渲染

其中 Promise.then以及MutationObserver为微任务，在当前事件循环执行。

setImmediate、setTimeout为宏任务，在下次事件循环执行。

下面代码为vue源码中的nextTick相关代码，我做了部分注释。

var isUsingMicroTask = false; //是否使用MutationObserver来触发回调函数执行，另作他用，可以在源码中搜索用到的地方，本文不做深究var callbacks = []; //存储回调函数var pending = false; //此次nextTick是否执行中的标记var timerFunc; //触发方法function noop(a, b, c) {} //空函数，ios用来强制刷新微任务队列//执行回调队列function flushCallbacks() { pending = false; //执行中标记置否 var copies = callbacks.slice(0); //浅拷贝回调 callbacks.length = 0; // 清空数组 for (var i = 0; i