摘要：而中的回調(diào)函數(shù)則會(huì)在頁面渲染后才執(zhí)行。還使用方法復(fù)制數(shù)組并把數(shù)組清空，這里的數(shù)組就是存放主線程執(zhí)行過程中的函數(shù)所傳的回調(diào)函數(shù)集合主線程可能會(huì)多次使用方法。到這里就已經(jīng)實(shí)現(xiàn)了根據(jù)環(huán)境選擇異步方法，并在異步方法中依次調(diào)用傳入方法的回調(diào)函數(shù)。

Vue 是采用異步的方式執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。然后，在下一個(gè)的事件循環(huán)中，Vue 刷新隊(duì)列并執(zhí)行頁面渲染工作。所以修改數(shù)據(jù)后DOM并不會(huì)立刻被重新渲染，如果想在數(shù)據(jù)更新后對頁面執(zhí)行DOM操作，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)。
下面這一段摘自vue官方文檔，關(guān)于JS 運(yùn)行機(jī)制的說明：

JS 執(zhí)行是單線程的，它是基于事件循環(huán)的。事件循環(huán)大致分為以下幾個(gè)步驟：
（1）所有同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧（execution context stack）。
（2）主線程之外，還存在一個(gè)"任務(wù)隊(duì)列"（task queue）。只要異步任務(wù)有了運(yùn)行結(jié)果，就在"任務(wù)隊(duì)列"之中放置一個(gè)事件。
（3）一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)讀取"任務(wù)隊(duì)列"，看看里面有哪些事件。那些對應(yīng)的異步任務(wù)，于是結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開始執(zhí)行。
（4）主線程不斷重復(fù)上面的第三步。

在主線程中執(zhí)行修改數(shù)據(jù)這一同步任務(wù)，DOM的渲染事件就會(huì)被放到“任務(wù)隊(duì)列”中，當(dāng)“執(zhí)行?！敝型饺蝿?wù)執(zhí)行完畢，本次事件循環(huán)結(jié)束，系統(tǒng)才會(huì)讀取并執(zhí)行“任務(wù)隊(duì)列”中的頁面渲染事件。而Vue.nextTick中的回調(diào)函數(shù)則會(huì)在頁面渲染后才執(zhí)行。
例子如下：

// Some code...
data () {
    return {
        test: "begin"
    };
},
// Some code...
this.test = "end";
console.log(this.$refs.test.innerText);//"begin"
this.nextTick(() => {
    console.log(this.$refs.test.innerText) //"end"
})

Vue.nextTick的源碼vue項(xiàng)目/src/core/util/路徑下的next-tick.js文件，文章最后也會(huì)貼出完整的源碼
我們先來看看對于異步調(diào)用函數(shù)的實(shí)現(xiàn)方法：

let timerFunc
if (typeof Promise !== "undefined" && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== "undefined" && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === "[object MutationObserverConstructor]"
)) {
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== "undefined" && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

這段代碼首先的檢測運(yùn)行環(huán)境的支持情況，使用不同的異步方法。優(yōu)先級(jí)依次是Promise、MutationObserver、setImmediate和setTimeout。這是根據(jù)運(yùn)行效率來做優(yōu)先級(jí)處理，有興趣可以去了解一下這幾種方法的差異?？偟膩碚f，Event Loop分為宏任務(wù)以及微任務(wù)，宏任務(wù)耗費(fèi)的時(shí)間是大于微任務(wù)的，所以優(yōu)先使用微任務(wù)。例如Promise屬于微任務(wù)，而setTimeout就屬于宏任務(wù)。最終timerFunc則是我們調(diào)用nextTick函數(shù)時(shí)要內(nèi)部會(huì)調(diào)用的主要方法，那么flushCallbacks又是什么呢，我們在看看flushCallbacks函數(shù)：

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

這個(gè)函數(shù)比較簡單，就是依次調(diào)用callbacks數(shù)組里面的方法。還使用slice()方法復(fù)制callbacks數(shù)組并把callbacks數(shù)組清空，這里的callbacks數(shù)組就是存放主線程執(zhí)行過程中的Vue.nextTick()函數(shù)所傳的回調(diào)函數(shù)集合（主線程可能會(huì)多次使用Vue.nextTick()方法）。到這里就已經(jīng)實(shí)現(xiàn)了根據(jù)環(huán)境選擇異步方法，并在異步方法中依次調(diào)用傳入Vue.nextTick()方法的回調(diào)函數(shù)。nextTick函數(shù)主要就是要將callback函數(shù)存在數(shù)組callbacks中，并調(diào)用timerFunc方法：

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

可以看到可以傳入第二個(gè)參數(shù)作為回調(diào)函數(shù)的this。另外如果參數(shù)一的條件判斷為false時(shí)則返回一個(gè)Promise對象。例如

Vue.nextTick(null, {value: "test"})
  .then((data) => {
    console.log(data.value)   // "test"
  })

這里還使用了一個(gè)優(yōu)化技巧，用pending來標(biāo)記異步任務(wù)是否被調(diào)用，也就是說在同一個(gè)tick內(nèi)只調(diào)用一次timerFunc函數(shù)，這樣就不會(huì)開啟多個(gè)異步任務(wù)。

完整的源碼：

import { noop } from "shared/util"
import { handleError } from "./error"
import { isIE, isIOS, isNative } from "./env"

export let isUsingMicroTask = false

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

// Here we have async deferring wrappers using microtasks.
// In 2.5 we used (macro) tasks (in combination with microtasks).
// However, it has subtle problems when state is changed right before repaint
// (e.g. #6813, out-in transitions).
// Also, using (macro) tasks in event handler would cause some weird behaviors
// that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109).
// So we now use microtasks everywhere, again.
// A major drawback of this tradeoff is that there are some scenarios
// where microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690, which have workarounds)
// or even between bubbling of the same event (#6566).
let timerFunc

// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== "undefined" && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    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)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== "undefined" && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === "[object MutationObserverConstructor]"
)) {
  // Use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== "undefined" && isNative(setImmediate)) {
  // Fallback to setImmediate.
  // Techinically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

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