Vue異步更新機制以及$nextTick原理

2022 年 4 月 24 日
筆記
VUE

相信很多人會好奇Vue內部的更新機制，或者平時工作中遇到的一些奇怪的問題需要使用$nextTick來解決，今天我們就來聊一聊Vue中的異步更新機制以及$nextTick原理

Vue的異步更新

可能你還沒有注意到，Vue異步執行DOM更新。只要觀察到數據變化，Vue將開啟一個隊列，並緩衝在同一事件循環中發生的所有數據改變。如果同一個watcher被多次觸發，只會被推入到隊列中一次。這種在緩衝時去除重複數據對於避免不必要的計算和DOM操作上非常重要。然後，在下一個的事件循環「tick」中，Vue刷新隊列並執行實際 (已去重的) 工作。

DOM更新是異步的

當我們在更新數據後立馬去獲取DOM中的內容是會發現獲取的依然還是舊的內容。

<template>
  <div class="next_tick">
      <div ref="title" class="title">{{name}}</div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            name: '前端南玖'
        }
    },
    mounted() {
        this.name = 'front end'
        console.log('sync',this.$refs.title.innerText)
        this.$nextTick(() => {
            console.log('nextTick',this.$refs.title.innerText)
        })
    }
}
</script>

從圖中我們可以發現數據改變後同步獲取dom元素中的內容是老的數據，而在nextTick裏面獲取的是更新後的數據，這是為什麼呢？

其實這裡你用微任務或宏任務去獲取dom元素中的內容也是更新後的數據，我們可以來試試：

mounted() {
  this.name = 'front end'
  console.log('sync',this.$refs.title.innerText)
  Promise.resolve().then(() => {
    console.log('微任務',this.$refs.title.innerText)
  })
  setTimeout(() => {
    console.log('宏任務',this.$refs.title.innerText)
  }, 0)
  this.$nextTick(() => {
    console.log('nextTick',this.$refs.title.innerText)
  })
}

是不是覺得有點不可思議，其實沒什麼奇怪的，在vue源碼中它的實現原理就是利用的微任務與宏任務，慢慢往下看，後面會一一解釋。

DOM更新還是批量的

沒錯，vue中的DOM更新還是批量處理的，這樣做的好處無疑就是能夠最大程度的優化性能。OK這裡也有看點，別著急

vue同時更新了多個數據，你覺得dom是更新多次還是更新一次？我們來試試

<template>
  <div class="next_tick">
      <div ref="title" class="title">{{name}}</div>
      <div class="verse">{{verse}}</div>
  </div>
</template>

<script>
export default {
    name: 'nextTick',
    data() {
        return {
            name: '前端南玖',
            verse: '如若東山能再起，大鵬展翅上九霄',
            count:0
        }
    },
    mounted() {
        this.name = 'front end'
        this.verse = '世間萬物都是空，功名利祿似如風'
        // console.log('sync',this.$refs.title.innerText)
        // Promise.resolve().then(() => {
        //     console.log('微任務',this.$refs.title.innerText)
        // })
        // setTimeout(() => {
        //     console.log('宏任務',this.$refs.title.innerText)
        // }, 0)
        // this.$nextTick(() => {
        //     console.log('nextTick',this.$refs.title.innerText)
        // })
    },
    updated() {
        this.count++
        console.log('update:',this.count)
    }

}
</script>
<style lang="less">
.verse{
    font-size: (20/@rem);
}
</style>

我們可以看到updated鉤子只執行了一次，說明我們同時更新了多個數據，DOM只會更新一次

再來看另一種情況，同步與異步混合，DOM會更新幾次？

mounted() {
  this.name = 'front end'
  this.verse = '世間萬物都是空，功名利祿似如風'
  Promise.resolve().then(() => {
    this.name = 'study ...'
  })
  setTimeout(() => {
    this.verse = '半身風雨半身寒，一杯濁酒敬流年'
  })
  // console.log('sync',this.$refs.title.innerText)
  // Promise.resolve().then(() => {
  //     console.log('微任務',this.$refs.title.innerText)
  // })
  // setTimeout(() => {
  //     console.log('宏任務',this.$refs.title.innerText)
  // }, 0)
  // this.$nextTick(() => {
  //     console.log('nextTick',this.$refs.title.innerText)
  // })
},
  updated() {
    this.count++
    console.log('update:',this.count)
  }

從圖中我們會發現，DOM會渲染三次，分別是同步的一次（2個同步一起更新），微任務的一次，宏任務的一次。並且在用setTimeout更新數據時會明顯看見頁面數據變化的過程。（這句話是重點，記好小本本）這也就是為什麼nextTick源碼中setTimeout做最後兜底用的，優先使用微任務。

事件循環

沒錯，這裡跟事件循環還有很大的關係，這裡稍微提一下，更詳細可以看探索JavaScript執行機制

由於JavaScript是單線程的，這就決定了它的任務不可能只有同步任務，那些耗時很長的任務如果也按同步任務執行的話將會導致頁面阻塞，所以JavaScript任務一般分為兩類：同步任務與異步任務，而異步任務又分為宏任務與微任務。

宏任務： script（整體代碼）、setTimeout、setInterval、setImmediate、I/O、UI rendering

微任務： promise.then、MutationObserver

執行過程

同步任務直接放入到主線程執行，異步任務（點擊事件，定時器，ajax等）掛在後台執行，等待I/O事件完成或行為事件被觸發。
系統後台執行異步任務，如果某個異步任務事件（或者行為事件被觸發），則將該任務添加到任務隊列，並且每個任務會對應一個回調函數進行處理。
這裡異步任務分為宏任務與微任務，宏任務進入到宏任務隊列，微任務進入到微任務隊列。
執行任務隊列中的任務具體是在執行棧中完成的，當主線程中的任務全部執行完畢後，去讀取微任務隊列，如果有微任務就會全部執行，然後再去讀取宏任務隊列
上述過程會不斷的重複進行，也就是我們常說的 「事件循環（Event-Loop）」。

總的來說，在事件循環中，微任務會先於宏任務執行。而在微任務執行完後會進入瀏覽器更新渲染階段，所以在更新渲染前使用微任務會比宏任務快一些，一次循環就是一次tick 。

在一次event loop中，microtask在這一次循環中是一直取一直取，直到清空microtask隊列，而macrotask則是一次循環取一次。

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

源碼深入

異步更新隊列

在Vue中DOM更新一定是由於數據變化引起的，所以我們可以快速找到更新DOM的入口，也就是set時通過dep.notify通知watcher更新的時候

// watcher.js
// 當依賴發生變化時，觸發更新
update() {
  if(this.lazy) {
    // 懶執行會走這裡, 比如computed
    this.dirty = true
  }else if(this.sync) {
    // 同步執行會走這裡，比如this.$watch() 或watch選項，傳遞一個sync配置{sync: true}
    this.run()
  }else {
    // 將當前watcher放入watcher隊列， 一般都是走這裡
    queueWatcher(this)
  }

}

從這裡我們可以發現vue默認就是走的異步更新機制，它會實現一個隊列進行緩存當前需要更新的watcher

// scheduler.js
/*將一個觀察者對象push進觀察者隊列，在隊列中已經存在相同的id則該觀察者對象將被跳過，除非它是在隊列被刷新時推送*/
export function queueWatcher (watcher: Watcher) {
  /*獲取watcher的id*/
  const id = watcher.id
  /*檢驗id是否存在，已經存在則直接跳過，不存在則標記在has中，用於下次檢驗*/
  if (has[id] == null) {
    has[id] = true
    // 如果flushing為false， 表示當前watcher隊列沒有在被刷新，則watcher直接進入隊列
    if (!flushing) {
      queue.push(watcher)
    } else {
      // 如果watcher隊列已經在被刷新了，這時候想要插入新的watcher就需要特殊處理
      // 保證新入隊的watcher刷新仍然是有序的
      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) {
      // wating為false，表示當前瀏覽器的異步任務隊列中沒有flushSchedulerQueue函數
      waiting = true
      // 這就是我們常見的this.$nextTick
      nextTick(flushSchedulerQueue)
    }
  }
}

ok，從這裡我們就能發現vue並不是跟隨數據變化立即更新視圖的，它而是維護了一個watcher隊列，並且id重複的watcher只會推進隊列一次，因為我們關心的只是最終的數據，而不是它更新多少次。等到下一個tick時，這些watcher才會從隊列中取出，更新視圖。

nextTick

nextTick的目的就是產生一個回調函數加入task或者microtask中，當前棧執行完以後（可能中間還有別的排在前面的函數）調用該回調函數，起到了異步觸發（即下一個tick時觸發）的目的。

// next-tick.js
const callbacks = []
let pending = false

// 批處理
function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  // 依次執行nextTick的方法
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

export function nextTick (cb, ctx) {
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 因為內部會調nextTick，用戶也會調nextTick，但異步只需要一次
  if (!pending) {
    pending = true
    timerFunc()
  }
  // 執行完會會返回一個promise實例，這也是為什麼$nextTick可以調用then方法的原因
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

兼容性處理，優先使用promise.then 優雅降級(兼容處理就是一個不斷嘗試的過程，誰可以就用誰。

Vue 在內部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執行環境不支持，則會採用 setTimeout(fn, 0) 代替。

// timerFunc 
// promise.then -> MutationObserver -> setImmediate -> setTimeout
// vue3 中不再做兼容性處理，直接使用的就是promise.then 任性

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) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  let counter = 1
  const observer = new MutationObserver(flushCallbacks) // 可以監聽DOM變化，監聽完是異步更新的
  // 但這裡並不是想用它做DOM監聽，而是利用它是微任務這一特點
  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 {
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

$nextTick

我們平常調用的$nextTick其實就是上面這個方法，只不過在源碼中renderMixin中將該方法掛在了vue的原型上方便我們使用

export function renderMixin (Vue) {
  // install runtime convenience helpers
  installRenderHelpers(Vue.prototype)

  Vue.prototype.$nextTick = function (fn) {
    return nextTick(fn, this)
  }
  
  Vue.prototype._render = function() {
    //...
  }
  // ...
}

總結

一般更新DOM是同步的

上面說了那麼多，相信大家對Vue的異步更新機制以及$nextTick原理已經有了初步的了解。每一輪事件循環的最後會進行一次頁面渲染，並且從上面我們知道渲染過程也是個宏任務，這裡可能會有個誤區，那就是DOM tree的修改是同步的，只有渲染過程是異步的，也就是說我們在修改完DOM後能夠立即獲取到更新的DOM，不信我們可以來試一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="title">欲試人間煙火，怎料世道滄桑</div>
    <script>
        title.innerText = '萬卷詩書無一用，半老雄心剩疏狂'
        console.log('updated',title)
    </script>
</body>
</html>

既然更新DOM是個同步的過程，那為什麼Vue卻需要借用$nextTick來處理呢？

答案很明顯，因為Vue處於性能考慮，Vue會將用戶同步修改的多次數據緩存起來，等同步代碼執行完，說明這一次的數據修改就結束了，然後才會去更新對應DOM，一方面可以省去不必要的DOM操作，比如同時修改一個數據多次，只需要關心最後一次就好了，另一方面可以將DOM操作聚集，提升render性能。

看下面這個圖理解起來應該更容易一點

為什麼優先使用微任務？

這個應該不用多說吧，因為微任務一定比宏任務優先執行，如果nextTick是微任務，它會在當前同步任務執行完立即執行所有的微任務，也就是修改DOM的操作也會在當前tick內執行，等本輪tick任務全部執行完成，才是開始執行UI rendering。如果nextTick是宏任務，它會被推進宏任務隊列，並且在本輪tick執行完之後的某一輪執行，注意，它並不一定是下一輪，因為你不確定宏任務隊列中它之前還有所少個宏任務在等待着。所以為了能夠儘快更新DOM，Vue中優先採用的是微任務，並且在Vue3中，它沒有了兼容判斷，直接使用的是promise.then微任務，不再考慮宏任務了。