全面解析Vue中的$nextTick

更新時間：2020年12月24日 08:36:33 作者：OLong

這篇文章主要介紹了Vue中的$nextTick的相關資料，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

當在代碼中更新了數(shù)據(jù)，并希望等到對應的Dom更新之后，再執(zhí)行一些邏輯。這時，我們就會用到$nextTick

funcion callback(){
 //等待Dom更新，然后搞點事。
}
$nextTick(callback)；

官方文檔對nextTick的解釋是：

在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。

那么，Vue是如何做的這一點的，是不是在調(diào)用修改Dom的Api之后（appendChild, textContent = "xxxxx" 諸如此類），調(diào)用了我們的回調(diào)函數(shù)？
實際上發(fā)生了什么呢。

源碼

nextTick的實現(xiàn)邏輯在這個文件里：

vue/src/core/util/next-tick.js

我們調(diào)用的this.$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
  timerFunc()
 }
 // $flow-disable-line
 if (!cb && typeof Promise !== 'undefined') {
  return new Promise(resolve => {
   _resolve = resolve
  })
 }
}

可以看到

回調(diào)函數(shù)被存放到了一個數(shù)組里:callbacks。
如果沒有傳遞回調(diào)函數(shù)，這個方法會返回一個Promise，然后吧reslove當成回調(diào)函數(shù)放到flushCallbacks中。所以文檔解釋了把本該當成回調(diào)函數(shù)的callbacks放到then里的用法。
然后，有一個變量叫pending，如果不在pending中，則執(zhí)行函數(shù)timerFunc。而且pending默認等于false。
flushCallbacks這個函數(shù)會一口氣執(zhí)行所有回調(diào)函數(shù)。

timerFunc

timerFunc定義在這里

可以看到timerFunc是在一個已resolve了的Promise的then 中執(zhí)行了flushCallbacks.

利用了js事件循環(huán)的微任務的機制

所以，每當我們調(diào)用$nextTick，如果pending為false，就會調(diào)用timerFunc,然后timerFunc會把flushCallbacks給塞到事件循環(huán)的隊尾，等待被調(diào)用。

if (typeof Promise !== 'undefined' && isNative(Promise)) {
 const p = Promise.resolve()
 timerFunc = () => {
  p.then(flushCallbacks)
 }
}

flushCallbacks

然后在這個文件里還有一個函數(shù)叫：flushCallbacks
用來把保存的回調(diào)函數(shù)給全執(zhí)行并清空。

function flushCallbacks () {
 pending = false
 const copies = callbacks.slice(0)
 callbacks.length = 0
 for (let i = 0; i < copies.length; i++) {
  copies[i]()
 }
}