Vue源碼閱讀一：說說vue.nextTick實現

用法：

在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

疑惑：

怎麼實現的延遲迴調

原理：

1. JavaScript語言的一大特色就是單線程，同一個時間只能作一件事
2. JavaScript任務能夠分爲兩種，一種是同步任務，一種是異步任務
3. 異步任務大體分爲，宏任務，和微任務
4. 全部同步任務都在主線程上執行，造成一個執行棧
5. 主線程以外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。
6. 一旦"執行棧"中的全部同步任務執行完畢，系統就會讀取"任務隊列"中的微任務，其次是宏任務，看看裏面有哪些事件。那些對應的異步任務，因而結束等待狀態，進入執行棧，開始執行。
7. 主線程不斷重複上面的第6步。

vue實現：

vue 大多數狀況下優先使用微任務， 不多的地方使用宏任務

vue nextTick 宏任務實現

• 優先檢測 setImmediate

if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
}
複製代碼

setImmediate 瀏覽器支持狀況

• 其次檢測 MessageChannel 支持狀況

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)
  }
} 
複製代碼

MessageChannel 瀏覽器支持狀況

• 上面都不支持就使用最原始的setTimeout

else {
  /* istanbul ignore next */
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}
複製代碼

vue nextTick 微任務實現

• 優先檢測 Promise

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)
  }
}
複製代碼

Promise 瀏覽器支持狀況

• 若是不支持Promise, 仍是使用宏任務

else {
  // fallback to macro
  microTimerFunc = macroTimerFunc
}
複製代碼

vue中什麼地方用宏任務，什麼地方用微任務？

從源碼中能夠看出，在DOM事件中使用Vue.nextTick 默認使用宏任務， 其餘地方使用Vue.nextTick默認使用微任務。

其實從源碼中註釋中能夠看出Vue最開始都是使用微任務方式，後面出現了bug，才引入了宏任務方式

// Here we have async deferring wrappers using both microtasks and (macro) tasks.
// In < 2.4 we used microtasks everywhere, but there are some scenarios where
// microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690) or even between bubbling of the same
// event (#6566). However, using (macro) tasks everywhere also has subtle problems
// when state is changed right before repaint (e.g. #6813, out-in transitions).
// Here we use microtask by default, but expose a way to force (macro) task when
// needed (e.g. in event handlers attached by v-on).
複製代碼

產考資料： JavaScript 運行機制詳解：再談Event Loop