摘要：淺析的特點之一就是響應式，但數據更新時，并不會立即更新。盡管已經更新，但新增的元素并不立即插入到中。實際在中，執行了，這也是自動綁定到執行上下文的原因。在內，使用數組保存回調函數，表示當前狀態，使用函數來執行回調隊列。

Vue 的特點之一就是響應式，但數據更新時，DOM 并不會立即更新。當我們有一個業務場景，需要在 DOM 更新之后再執行一段代碼時，可以借助nextTick實現。以下是來自官方文檔的介紹：

將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。

具體的使用場景和底層代碼實現在后面的段落說明和解釋。

Vue.nextTick([callback, context]) 與 vm.$nextTick([callback])

前者是全局方法，可以顯式指定執行上下文，而后者是實例方法，執行時自動綁定this到當前實例上。

此外，在 2.1.0 版本還新增了不傳入回調的使用方式，這種調用會返回一個 Promise，在 then 的回調執行目標操作即可，如vm.$nextTick().then(cb)。

以下是一個nextTick使用例子:

  add
  {{count}}
  

    

      {{item}}
    
  

new Vue({
  el: "#app",
  data: {
    count: 0,
    list: []
  },
  methods: {
    add() {
      this.count += 1;
      this.list.push(1);
      let li = this.$refs.ul.querySelectorAll("li");
      li.forEach(item => {
        item.style.color = "red";
      });
    }
  }
});

以上的代碼，期望在每次新增一個列表項時都使得列表項的字體是紅色的，但實際上新增的列表項字體仍是黑色的。盡管data已經更新，但新增的 li 元素并不立即插入到 DOM 中。如果希望在 DOM 更新后再更新樣式，可以在nextTick的回調中執行更新樣式的操作。

new Vue({
  el: "#app",
  data: {
    count: 0,
    list: []
  },
  methods: {
    add() {
      this.count += 1;
      this.list.push(1);
      this.$nextTick(() => {
        let li = this.$refs.ul.querySelectorAll("li");
        li.forEach(item => {
          item.style.color = "red";
        });
      });
    }
  }
});

數據更新時，并不會立即更新 DOM。如果在更新數據之后的代碼執行另一段代碼，有可能達不到預想效果。將視圖更新后的操作放在nextTick的回調中執行，其底層通過微任務的方式執行回調，可以保證 DOM 更新后才執行代碼。

在/src/core/instance/index.js，執行方法renderMixin(Vue)為Vue.prototype添加了$nextTick方法。實際在Vue.prototype.$nextTick中，執行了nextTick(fn, this)，這也是vm.$nextTick( [callback] )自動綁定this到執行上下文的原因。

nextTick函數在/scr/core/util/next-tick.js聲明。在next-tick.js內，使用數組callbacks保存回調函數，pending表示當前狀態，使用函數flushCallbacks來執行回調隊列。在該方法內，先通過slice(0)保存了回調隊列的一個副本，通過設置callbacks.length = 0清空回調隊列，最后使用循環執行在副本里的所有函數。

const callbacks = [];
let pending = false;

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

接著定義函數marcoTimerFunc、microTimerFunc。

先判斷是否支持setImmediate，如果支持，使用setImmediate執行回調隊列；如果不支持，判斷是否支持MessageChannel，支持時，在port1監聽message，將flushCallbacks作為回調；如果仍不支持MessageChannel，使用setTimeout(flushCallbacks, 0)執行回調隊列。不管使用哪種方式，macroTimerFunc最終目的都是在一個宏任務里執行回調隊列。

if (typeof setImmediate !== "undefined" && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else if (
  typeof MessageChannel !== "undefined" &&
  (isNative(MessageChannel) ||
    // PhantomJS
    MessageChannel.toString() === "[object MessageChannelConstructor]")
) {
  const channel = new MessageChannel();
  const port = channel.port2;
  channel.port1.onmessage = flushCallbacks;
  macroTimerFunc = () => {
    port.postMessage(1);
  };
} else {
  /* istanbul ignore next */
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

然后判斷是否支持Promise，支持時，新建一個狀態為resolved的Promise對象，并在then回調里執行回調隊列，如此，便在一個微任務中執行回調，在 IOS 的 UIWebViews 組件中，盡管能創建一個微任務，但這個隊列并不會執行，除非瀏覽器需要執行其他任務；所以使用setTimeout添加一個不執行任何操作的回調，使得微任務隊列被執行。如果不支持Promise，使用降級方案，將microTimerFunc指向macroTimerFunc。

if (typeof Promise !== "undefined" && isNative(Promise)) {
  const p = Promise.resolve();
  microTimerFunc = () => {
    p.then(flushCallbacks);
    // in problematic UIWebViews, Promise.then doesn"t completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn"t being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    if (isIOS) setTimeout(noop);
  };
} else {
  // fallback to macro
  microTimerFunc = macroTimerFunc;
}

在函數nextTick內，先將函數cb使用箭頭函數包裝起來并添加到回調隊列callbacks，轉入的回調cb會在callbacks被遍歷執行的時候執行。如果沒有傳入cb，則是形如this.$nextTick().then(cb)的使用方式，所以要返回一個fulfilled的 Promise，在箭頭函數內則需要執行resolved，令返回的 Promise 狀態變為fulfilled。接著判斷當前是否正在執行回調，如果不是，將pengding設置為真。判斷回調執行是宏任務還是微任務，分別通過marcoTimerFunc、microTimerFunc來觸發回調隊列。最后，如果，沒有傳入cb，則需要創建一個Promise實例并返回以支持鏈式調用，并且將_resolve指向返回 Promise 的resolve函數。

export function nextTick(cb?: Function, ctx?: Object) {
  let _resolve;
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx);
      } catch (e) {
        handleError(e, ctx, "nextTick");
      }
    } else if (_resolve) {
      _resolve(ctx);
    }
  });
  if (!pending) {
    pending = true;
    if (useMacroTask) {
      macroTimerFunc();
    } else {
      microTimerFunc();
    }
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== "undefined") {
    return new Promise(resolve => {
      _resolve = resolve;
    });
  }
}

而全局方法Vue.nextTick在/src/core/global-api/index.js中聲明，是對函數nextTick的引用，所以使用時可以顯式指定執行上下文。

Vue.nextTick = nextTick;

本文關于nextTick的使用場景和源碼做了簡單的介紹，如果想深入了解這部分的知識，可以去了解一下微任務mircotask和宏任務marcotask。