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

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

將回調延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。

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

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

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

此外，在 2.1.0 版本還新增了不傳入回調的使用方式，這種調用會返回一個 Promise，在 then 的回調執(zhí)行目標操作即可，如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已經(jīng)更新，但新增的 li 元素并不立即插入到 DOM 中。如果希望在 DOM 更新后再更新樣式，可以在nextTick的回調中執(zhí)行更新樣式的操作。

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

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

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

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

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

接著定義函數(shù)marcoTimerFunc、microTimerFunc。

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

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，支持時，新建一個狀態(tài)為resolved的Promise對象，并在then回調里執(zhí)行回調隊列，如此，便在一個微任務中執(zhí)行回調，在 IOS 的 UIWebViews 組件中，盡管能創(chuàng)建一個微任務，但這個隊列并不會執(zhí)行，除非瀏覽器需要執(zhí)行其他任務；所以使用setTimeout添加一個不執(zhí)行任何操作的回調，使得微任務隊列被執(zhí)行。如果不支持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;
}

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

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中聲明，是對函數(shù)nextTick的引用，所以使用時可以顯式指定執(zhí)行上下文。

Vue.nextTick = nextTick;

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