nextTick的原理及運行機制

文章首次發表在我的博客

JS運行機制

JS執行是單線程的，它是基於事件循環的。事件循環大體分爲如下幾個部分：

1. 全部同步任務在主線程上執行，造成一個執行棧。
2. 主線程以外，還存在一個「任務隊列」。只要異步有了運行結果。就在"任務隊列"中放置一個事件。
3. 一旦"執行棧"中全部的同步任務執行完畢，系統就會讀取「任務隊列」，看看裏面有哪些事件。那些對應的異步任務，因而結束等待狀態，進入執行棧，開始執行。
4. 主線程不斷重複上面的第三步。

主線程的執行過程就是一個tick，而全部的異步結果都是經過 "任務隊列" 來調度。消息隊列中存放的是一個個 macro task 結束後，都要清空 全部的 micro task。

for (macroTask of macroTaskQueue) {
    // 1. Handle current MACRO-TASK
    handleMacroTask();
      
    // 2. Handle all MICRO-TASK
    for (microTask of microTaskQueue) {
        handleMicroTask(microTask);
    }
}
複製代碼

在瀏覽器環境中，常見的 macro task 有setTimeout、postMessage、setImmediate； 常見的 micro task有 Promise.then和MutationObserver（html5新特性，會在指定的DOM發生變化時被調用）

Vue是異步更新DOM的

vue 是異步驅動視圖更新的，即當咱們在事件中修改數據時，視圖並不會即時的更新， 而是在等同一事件循環的全部數據變化完成後，再進行事件更新;

vue文檔中的介紹:

Vue 在更新 DOM 時是異步執行的，只要觀察到數據變化，Vue 將開啓一個隊列，並緩衝在同一事件循環中發生的全部數據改變。若是同一個 watcher 被屢次觸發，只會被推入到隊列中一次，這種在緩衝時去除重複數據對於避免沒必要要的計算和 DOM 操做上很是重要。而後，在下一個的事件循環tick中， Vue 刷新隊列並執行實際(已去重)的工做。Vue 在內部嘗試對異步隊列使用原生Promise.then和 MutationObserver以及setImmediate, 若是執行環境不支持，會採用setTimeout(fn, 0)代替；

<div id="app">
    <p ref="message">{{ message }}</p>
    <button @click="handleClick">updateMessage</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '未更新'
        },
        methods: {
            handleClick () {
                vm.message = '已更新';
                console.log(111, vm.$refs.message.innerText); // => 111 "未更新"
                vm.$nextTick(() => {
                    console.log(222, vm.$refs.message.innerText); // => 222 "已更新"
                })
            }
        }
    })
</script>
複製代碼

上面這個例子中，咱們能夠看到，更新message後，馬上打印DOM的內容，它並無更新，在 $nextTick中執行，咱們能夠獲得更新後的值。 這也驗證了上面提到的 Vue在更新DOM時是異步更新的。

爲何須要異步更新呢，咱們能夠想一下，若是隻要每次數據改變，視圖就進行更新，會有不少沒必要要的渲染，好比一段時間內，你無心中修改了 message修改了不少次，其實只要最後一次修改後的值更新到DOM就能夠了，假如是同步更新的，每次 message 值發生變化，那麼都要觸發 setter->Dep->Watcher->update->patch ，這個過程很是消耗性能。

nextTick的原理及運行機制

咱們能夠從源碼入手進行分析，基於vue 2.6.11 版本, 源碼位置src/core/util/next-tick.js

/* @flow */
/* globals MutationObserver */

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

export let isUsingMicroTask = false

const callbacks = []
let pending = false

/** * 對全部callback進行遍歷，而後指向響應的回調函數 * 使用 callbacks 保證了能夠在同一個tick內執行屢次 nextTick，不會開啓多個異步任務，而把這些異步任務都壓成一個同步任務，在下一個 tick 執行完畢。 */

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 */
/** * timerFunc 實現的就是根據當前環境判斷使用哪一種方式實現 * 就是按照 Promise.then和 MutationObserver以及setImmediate的優先級來判斷，支持哪一個就用哪一個，若是執行環境不支持，會採用setTimeout(fn, 0)代替； */

// 判斷是否支持原生 Promise
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
  // 不支持 Promise的話，再判斷是否原生支持 MutationObserver
} 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)
  // 新建一個 textNode的DOM對象，使用 MutationObserver 綁定該DOM並傳入回調函數，在DOM發生變化的時候會觸發回調，該回調會進入主線程（比任務隊列優先執行）
  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
  // 不支持的 MutationObserver 的話，再去判斷是否原生支持 setImmediate
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // Fallback to setImmediate.
  // Technically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // Promise，MutationObserver, setImmediate 都不支持的話，最後使用 setTimeout(fun, 0)
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

// 還函數的做用就是延遲 cb 到當前調用棧執行完成以後執行
export function nextTick (cb?: Function, ctx?: Object) {
  // 傳入的回調函數會在callbacks中存起來
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // pending是一個狀態標記，保證timerFunc在下一個tick以前只執行一次
  if (!pending) {
    pending = true
    /** * timerFunc 實現的就是根據當前環境判斷使用哪一種方式實現 * 就是按照 Promise.then和 MutationObserver以及setImmediate的優先級來判斷，支持哪一個就用哪一個，若是執行環境不支持，會採用setTimeout(fn, 0)代替； */
    timerFunc()
  }
  // 當nextTick不傳參數的時候，提供一個Promise化的調用
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}
複製代碼

大體說一下整個過程

1. nextTick接受一個回調函數時（當不傳參數的時候，提供一個Promise化的調用），傳入的回調函數會在callbacks中存起來，根據一個狀態標記 pending 來判斷當前是否要執行 timerFunc()

2. timerFunc() 是根據當前環境判斷使用哪一種方式實現，按照 Promise.then和 MutationObserver以及setImmediate的優先級來判斷，支持哪一個就用哪一個，若是執行環境不支持，會採用setTimeout(fn, 0)代替

3. timerFunc() 函數中會執行 flushCallbacks函數，flushCallbacks函數的做用就是對全部callback進行遍歷，而後指向響應的回調函數

總結

Vue是異步更新DOM的，在日常的開發過程當中，咱們可能會須要基於更新後的 DOM 狀態來作點什麼，好比後端接口數據發生了變化，某些方法是依賴於更新後的DOM變化，這時咱們就能夠使用 Vue.nextTick(callback)方法。

重要參考

• vue文檔-異步更新隊列
• Vue.js 技術揭祕之nextTick
• Vue.js異步更新DOM策略及nextTick.
• Vue 中如何使用 MutationObserver 作批量處理？
• Vue nextTick 機制
• JavaScript 運行機制詳解：再談Event Loop