Vue源碼解析之nextTick

前言

nextTick是Vue的一個核心功能，在Vue內部實現中也經常用到nextTick。但是，很多新手不理解nextTick的原理，甚至不清楚nextTick的作用。

那麼，我們就先來看看nextTick是什麼。

nextTick功能

看看官方文檔的描述：

在下次 DOM 更新迴圈結束之後執行延遲回調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。

再看看官方示例：

// 修改數據
vm.msg = 'Hello'
// DOM 還沒有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作為一個 Promise 使用 (2.1.0 起新增，詳見接下來的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

2.1.0 起新增：如果沒有提供回調且在支持 Promise 的環境中，則返回一個 Promise。請註意 Vue 不自帶 Promise 的 polyfill，所以如果你的目標瀏覽器不原生支持 Promise (IE：你們都看我幹嘛)，你得自己提供 polyfill。

可以看到，nextTick主要功能就是改變數據後讓回調函數作用於dom更新後。很多人一看到這裡就懵逼了，為什麼需要在dom更新後再執行回調函數，我修改了數據後，不是dom自動就更新了嗎？

這個和JS中的Event Loop有關，網上教程不計其數，在此就不再贅述了。建議明白Event Loop後再繼續向下閱讀本文。

舉個實際的例子：

我們有個帶有分頁器的表格，每次翻頁需要選中第一項。正常情況下，我們想的是點擊翻頁器，向後臺獲取數據，更新表格數據，操縱表格API選中第一項。

但是，你會發現，表格數據是更新了，但是並沒有選中第一項。因為，你選中第一項時，雖然數據更新了，但是DOM並沒有更新。此時，你可以使用nextTick，在DOM更新後再操縱表格第一項的選中。

那麼，nextTick到底做了什麼了才能實現在DOM更新後執行回調函數？

源碼分析

nextTick的源碼位於src/core/util/next-tick.js，總計118行，十分的短小精悍，十分適合初次閱讀源碼的同學。

nextTick源碼主要分為兩塊：

1.能力檢測

2.根據能力檢測以不同方式執行回調隊列

能力檢測

這一塊其實很簡單，眾所周知，Event Loop分為巨集任務（macro task）以及微任務（ micro task），不管執行巨集任務還是微任務，完成後都會進入下一個tick，併在兩個tick之間執行UI渲染。

但是，巨集任務耗費的時間是大於微任務的，所以在瀏覽器支持的情況下，優先使用微任務。如果瀏覽器不支持微任務，使用巨集任務；但是，各種巨集任務之間也有效率的不同，需要根據瀏覽器的支持情況，使用不同的巨集任務。

nextTick在能力檢測這一塊，就是遵循的這種思想。

// Determine (macro) task defer implementation.
// Technically setImmediate should be the ideal choice, but it's only available
// in IE. The only polyfill that consistently queues the callback after all DOM
// events triggered in the same loop is by using MessageChannel.
/* istanbul ignore if */
// 如果瀏覽器不支持Promise，使用巨集任務來執行nextTick回調函數隊列
// 能力檢測，測試瀏覽器是否支持原生的setImmediate（setImmediate只在IE中有效）
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // 如果支持，巨集任務（ macro task）使用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 */
  // 都不支持的情況下，使用setTimeout
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

首先，檢測瀏覽器是否支持setImmediate，不支持就使用MessageChannel，再不支持只能使用效率最差但是相容性最好的setTimeout了。

之後，檢測瀏覽器是否支持Promise，如果支持，則使用Promise來執行回調函數隊列，畢竟微任務速度大於巨集任務。如果不支持的話，就只能使用巨集任務來執行回調函數隊列。

執行回調函數隊列

執行回調函數隊列的代碼剛好在一頭一尾

// 回調函數隊列
const callbacks = []
// 非同步鎖
let pending = false

// 執行回調函數
function flushCallbacks () {
  // 重置非同步鎖
  pending = false
  // 防止出現nextTick中包含nextTick時出現問題，在執行回調函數隊列前，提前複製備份，清空回調函數隊列
  const copies = callbacks.slice(0)
  callbacks.length = 0
  // 執行回調函數隊列
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

...

// 我們調用的nextTick函數
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
  // 2.1.0新增，如果沒有提供回調，並且支持Promise，返回一個Promise
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

總體流程就是，接收回調函數，將回調函數推入回調函數隊列中。

同時，在接收第一個回調函數時，執行能力檢測中對應的非同步方法（非同步方法中調用了回調函數隊列）。

如何保證只在接收第一個回調函數時執行非同步方法？

nextTick源碼中使用了一個非同步鎖的概念，即接收第一個回調函數時，先關上鎖，執行非同步方法。此時，瀏覽器處於等待執行完同步代碼就執行非同步代碼的情況。

打個比喻：相當於一群旅客準備上車，當第一個旅客上車的時候，車開始發動，準備出發，等到所有旅客都上車後，就可以正式開車了。

當然執行flushCallbacks函數時有個難以理解的點，即：為什麼需要備份回調函數隊列？執行的也是備份的回調函數隊列？

因為，會出現這麼一種情況：nextTick套用nextTick。如果flushCallbacks不做特殊處理，直接迴圈執行回調函數，會導致裡面nextTick中的回調函數會進入回調隊列。這就相當於，下一個班車的旅客上了上一個班車。

實現一個簡易的nextTick

說了這麼多，我們來實現一個簡單的nextTick：

let callbacks = []
let pending = false

function nextTick (cb) {
    callbacks.push(cb)

    if (!pending) {
        pending = true
        setTimeout(flushCallback, 0)
    }
}

function flushCallback () {
    pending = false
    let copies = callbacks.slice()
    callbacks.length = 0
    copies.forEach(copy => {
        copy()
    })
}

可以看到，在簡易版的nextTick中，通過nextTick接收回調函數，通過setTimeout來非同步執行回調函數。通過這種方式，可以實現在下一個tick中執行回調函數，即在UI重新渲染後執行回調函數。