通熟易懂的Vue異步更新策略及 nextTick 原理

最近在學習一些底層方面的知識。因此想作個系列嘗試去聊聊這些比較複雜又很重要的知識點。學習就比如是座大山，只有本身去爬山，才能看到不同的風景，體會更加深入。今天咱們就來聊聊Vue中比較重要的異步更新策略及 nextTick 原理。

在聊話題以前咱們能夠看下下面這道面試題：

setTimeout(() => {
  console.log('真的在300ms後打印嗎？')
}, 300)
複製代碼

這段代碼很簡單，相信不少人都會說yes。固然也不乏大牛的存在，一眼就能看出答案來不必定。這是爲何呢？在面試過程當中碰到這類問題如何回答才能讓面試官滿意，而且如何去擴散咱們的知識點。

在正式講解以前咱們能夠先了解一些簡單的概念：

什麼是進程： 進程是cpu分配資源的最小單位；（是能擁有資源和獨立運行的最小單位）

什麼是線程： 線程是cpu調度的最小單位；（線程是創建在進程的基礎上的一次程序運行單位，一個進程中能夠有多個線程）

概念理解起來比較枯燥，作個比喻好了：

進程 就是一個公司，每一個公司都有本身的資源能夠調度；公司之間是相互獨立的；而 線程 就是公司中的每一個員工，多個員工一塊兒合做，完成任務，公司能夠有一名員工或多個，員工之間共享公司的空間。

瀏覽器是多進程的： 在瀏覽器中，每打開一個tab頁面，其實就是新開了一個進程，在這個進程中，還有ui渲染線程，js引擎線程，http請求線程等。 因此，瀏覽器是一個多進程的。

js是單線程的： js是做爲瀏覽器的腳本語言，主要是實現用戶與瀏覽器的交互，以及操做dom；這決定了它只能是單線程，不然會帶來很複雜的同步問題。 舉個例子：若是js被設計了多線程，若是有一個線程要修改一個dom元素，另外一個線程要刪除這個dom元素，此時瀏覽器就會一臉茫然，不知所措。因此，爲了不復雜性，從一誕生，JavaScript就是單線程。

js執行機制--Event loop

因爲js是單線程，js設計者把任務分爲同步任務和異步任務，同步任務都在主線程上排隊執行，前面任務沒有執行完成，後面的任務會一直等待；異步任務則是掛在在一個任務隊列裏，等待主線程全部任務執行完成後，通知任務隊列能夠把可執行的任務放到主線程執行。異步任務放到主線程執行完後，又通知任務隊列把下一個異步任務放到主線程中執行。這個過程一直持續，直到異步任務執行完成，這個持續重複的過程就叫Event loop。而一次循環就是一次tick 。

在任務隊列中的異步任務又能夠分爲兩種microtast（微任務） 和 macrotask（宏任務）

microtast（微任務）：Promise， process.nextTick， Object.observe， MutationObserver

macrotask（宏任務）：script總體代碼、setTimeout、 setInterval等

執行優先級上，先執行宏任務macrotask，再執行微任務mincrotask。

執行過程當中須要注意的幾點是：

• 在一次event loop中，microtask在這一次循環中是一直取一直取，直到清空microtask隊列，而macrotask則是一次循環取一次。
• 若是執行事件循環的過程當中又加入了異步任務，若是是macrotask，則放到macrotask末尾，等待下一輪循環再執行。若是是microtask，則放到本次event loop中的microtask任務末尾繼續執行。直到microtask隊列清空。

  

  到這裏，上面那個300ms的定時器爲何不必定是精確的300ms以後打印就能理解了：

由於300ms的setTimeout並非說300ms以後立馬執行，而是300ms以後被放入任務列表裏面。等待事件循環，等待它執行的時候才能執行代碼。若是異步任務列表裏面只有它這個macrotask任務，那麼就是精確的300ms。可是若是 還有microtast等其它的任務，就不止300ms了。

擴展一：

在面試過程當中有時也會遇到這類問題。在這以前我覺得考的是let和var的區別，其實它裏面也包含着今天講的知識。

for(var i =0 ;i < 3; i++) {
  console.log("for中i的值："+i)
  var time = setTimeout(() => {
    console.log("setTimeout中i的值："+i)
  }, 300);
}
複製代碼

打印的結果致使是什麼樣的呢：

• 一、當執行for循環的時候，定義了3個定時器，因爲setTimeout是異步任務，全部這三個定時器，都會在300ms以後加入任務隊列
• 二、此時執行代碼，依次輸出個 for中i的值：一、二、3
• 300ms以後，每一個setTimeout的加入到任務隊列，這時for循環早就執行完畢了，此時的 i 因爲主線程執行完以後變成了3。因爲這時setTimeout匿名回調函數保持對外部變量 i 的引用，因此最終再打印出3個 setTimeout中i的值：3

用let改變一下結果就不同。最終依次打印出 setTimeout中i的值：一、二、3

for(let i =0 ;i < 3; i++) {
  console.log("for中i的值："+i)
  var time = setTimeout(() => {
    console.log("setTimeout中i的值："+i)
  }, 300);
}
複製代碼

• 一、var聲明的變量，在全局範圍內都有效，因此在全局只有一個變量i，每一次循環，變量i的值都會發生改變，而循環內部，被賦給setTimeout函數內部的i指向全局的i,結合以前講的事件執行機制，最後一輪打印的i也都是3了
• 二、let聲明的變量，let只在塊及做用域中有效，而且不存在變量提高。因此每次循環在setTimeout中的i都是一個新的變量。

🤔既然每次循環的i都是一個新值，那麼結果輸出應該都是初始化值1呀 ？這是由於JavaScript引擎內部會記住上一輪循環的值，初始化本輪變量i時，就在上一輪循環的基礎上進行計算

擴展二：

當你完全搞懂一個知識點時，你會發現運用到其餘的地方也是同樣，咱們接着看下面的代碼：

console.log(1);
setTimeout(function () {
  console.log(2)
}, 0); 
new Promise(function (resolve) {
  console.log(3)    
  for (var i = 100; i > 0; i--) {
    i == 1 && resolve()
  }
  console.log(4)
}).then(function () {
  console.log(5)
}).then(function () {
  console.log(6)
});
console.log(7);
複製代碼

這段代碼在面試中也常常考到，以前我也是很迷糊的，可是當你掌握了今天的知識，你會發現一切都是那麼簡單

• 一、因爲script也屬於macrotask，因此整個script裏面的內容都放到了主線程（任務棧）中，按順序執行代碼。而後遇到console.log(1)，直接打印1。
• 遇到setTimeout,表示0秒後加入任務隊列，由於setTimeout是一個宏觀任務，因此會放到下一個macrotask，這裏不會執行
• 遇到new Promise，new Promise在實例的過程當中執行代碼都是同步進行的，只有回調.then()纔是微任務。因此先打印3。執行完循環打印4。而後遇到第一個 .then()，屬於microtask，加入到本次循環的microtask隊列裏面。接着向下執行又遇到一個 .then()，又加入到本次循環的microtask隊列裏面。而後繼續向下執行。
• 遇到console.log(7)，直接打印7。直到此時，一個事件循環的macrotask執行完成，而後去查看這次循環是否還有microtask，發現還有剛纔的 .then() ，當即放到主線程執行，打印出5。而後發現還有第二個 .then()，當即放到主線程執行，打印出6 。此時microtask任務列表清空完了。到此第一次循環完成。
• 第二次事件循環，從macrotask任務列表裏面找到了第一次放進的setTimeout，放到主線程執行，打印出2。
• 最終打印的結果：一、三、四、七、五、六、2

在vue中的擴展--異步更新策略及 nextTick 原理

平時可能在面試也不乏常常被問到：vue中的nextTick是什麼？它的原理和做用是啥？那nextTick究竟是什麼，官方文檔是這麼定義的：

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

咱們也能夠簡單的理解爲：當頁面中的數據發生改變了，就會把該任務放到一個異步隊列中，只有在當前任務空閒時纔會進行DOM渲染，當DOM渲染完成之後，該函數就會自動執行。

結合上面講的微任務去理解，microtask在這一次循環中是一直取一直取，直到清空microtask隊列，而macrotask則是一次循環取一次，一次就是一次tick。所以當觸發數據的setter，vue在microtask創建一個cb事件，在循環到下一次tick的時候會去自動執行這個事件。

結合源碼咱們再去品一下：當觸發某個數據的setter方法後，它的setter函數會通知閉包中的Dep，Dep則會調用它管理的全部Watch對象。觸發Watch對象的update實現。咱們來看一下update具體是如何實現的。（這裏的Dep、Watcher就是Vue響應式的基礎了，後面有章節會講到，這裏只須要理解state變化更新的時候，調用update函數更新）

/*調度者接口，當依賴發生改變的時候進行回調 */
  update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      /*同步則執行run直接渲染視圖*/
      this.run()
    } else {
      /*異步推送到觀察者隊列中，下一個tick時調用。*/
      queueWatcher(this)
    }
  }
複製代碼

從代碼中能夠看到，當state變化的時候會調用queueWatcher(this)函數，這也是vue異步更新隊列的方式。那麼咱們跟着去看看queueWatcher作了什麼

/*將一個觀察者對象push進觀察者隊列，在隊列中已經存在相同的id則該觀察者對象將被跳過，除非它是在隊列被刷新時推送*/
export function queueWatcher (watcher: Watcher) {
  /*獲取watcher的id*/
  const id = watcher.id
  /*檢驗id是否存在，已經存在則直接跳過，不存在則標記哈希表has，用於下次檢驗*/
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      queue.push(watcher)
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      let i = queue.length - 1
      while (i >= 0 && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(Math.max(i, index) + 1, 0, watcher)
    }
    // queue the flush
    if (!waiting) {
      waiting = true
      nextTick(flushSchedulerQueue)
    }
  }
}
複製代碼

從queueWatcher代碼中看出Watch對象並非當即更新視圖，而是被push進了一個隊列queue，此時狀態處於waiting的狀態，這時候會繼續會有Watch對象被push進這個隊列queue，等到下一個tick運行時將這個隊列queue所有拿出來run一遍，這些Watch對象纔會被遍歷取出，更新視圖。同時，id重複的Watcher不會被屢次加入到queue中去。這也解釋了同一個watcher被屢次觸發，只會被推入到隊列中一次。

到這裏能夠停一下理理思路，借鑑這種圖再去細品一下：

從圖中和以前講的Event loop來總結一下：vue爲了不頻繁的操做DOM,採用異步的方式更新DOM。這些異步操做會經過nextTick函數將這些操做以cb的形式放到任務隊列中（以微任務優先），當每次tick結束以後就會去執行這些cb，更新DOM。

vue爲了實現異步更新效果，創建了nextTick函數，接下來讓咱們一塊兒看看nextTick是如何實現的， 參考 源碼地址 查看。

/*存放異步執行的回調*/
const callbacks = [] 
/*一個標記位，若是已經有timerFunc被推送到任務隊列中去則不須要重複推送*/
let pending = false
/*一個函數指針，指向函數將被推送到任務隊列中，等到主線程任務執行完時，任務隊列中的timerFunc被調用*/
let timerFunc

/*
  推送到隊列中下一個tick時執行
  cb 回調函數
  ctx 上下文
*/
export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
   // 第一步 傳入的cb會被push進callbacks中存放起來
  callbacks.push(() => {
    if (cb) {      
        try {
            cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })  
  // 檢查上一個異步任務隊列（即名爲callbacks的任務數組）是否派發和執行完畢了。pending此處至關於一個鎖
  if (!pending) {
  // 若上一個異步任務隊列已經執行完畢，則將pending設定爲true（把鎖鎖上）
    pending = true
    // 調用判斷Promise，MutationObserver，setTimeout的優先級
    timerFunc()
  }
  // 第三步執行返回的狀態
  if (!cb && typeof Promise !== 'undefined') {   
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}
複製代碼

關於timerFunc函數這裏省略了，其實就是判斷使用Promise，MutationObserver，setTimeout的優先級。系統中會優先用Promise，在Promise不存在的狀況下使用MutationObserver，這兩個方法都會在microtask中執行，會比setTimeout更早執行，因此優先使用。 若是上述兩種方法都不支持的環境則會使用setTimeout，在task尾部推入這個函數，等待調用執行。

思考🤔：爲何優先執行順序Promise、MutationObserver 》setTimeout

在主線程上，若是再遇到macrotask，就把它放到macrotask任務隊列末尾，因爲一次event loop只能取一個macrotask，因此遇到的宏任務就須要等待其它輪次的事件循環了；若是遇到microtask，則放到本次循環的microtask隊列中去。這樣就能明白爲何microtask會比macrotask先處理了。這也是nextTick老是要比setTimeout先要執行。

總結的話，細細品一下官方文檔增強理解： 官方文檔

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