$nextTick在Vue中的作用是什么

這篇文章給大家介紹$nextTick在Vue中的作用是什么，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

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

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

官方文檔對nextTick的解釋是：

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

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

源碼

nextTick的實現邏輯在這個文件里：

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

我們調用的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
  })
 }
}

可以看到

1. 回調函數被存放到了一個數組里:callbacks。

2. 如果沒有傳遞回調函數，這個方法會返回一個Promise，然后吧reslove當成回調函數放到flushCallbacks中。所以文檔解釋了把本該當成回調函數的callbacks放到then里的用法。

3. 然后，有一個變量叫pending，如果不在pending中，則執行函數timerFunc。而且pending默認等于false。

4. flushCallbacks這個函數會一口氣執行所有回調函數。
   

timerFunc

timerFunc定義在這里

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

利用了js事件循環的微任務的機制

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

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

flushCallbacks

然后在這個文件里還有一個函數叫：flushCallbacks
用來把保存的回調函數給全執行并清空。

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

pending

什么時候pending為true呢？

從timerFunc被調用到flushCallbacks被調用期間pending為true

即一個事件循環周期

在pending期間加入的回調函數，會被已經等待執行的flushCallbacks函數給執行。

核心機制

看完源碼，發現除了利用了一個微任務的機制，和Dom更新一點關系都沒有哇。

其實調用nextTick的不僅是開發者，Vue更新Dom時，也用到了nextTick。

開發者更新綁定的數據之后，Vue就會立刻調用nextTick，把更新Dom的回調函數作為微任務塞到事件循環里去。

于是，在微任務隊列中，開發者調用的nextTick的回調函數，就一定在更行Dom的回調函數之后執行了。

但是問題又來了，根據瀏覽器的渲染機制，渲染線程是在微任務執行完成之后運行的。渲染線程沒運行，怎么拿到Dom呢？

因為，渲染線程只是把Dom樹渲染成UI而已，Vue更新Dom之后，在Dom樹里，新的Dom節點已經存在了，js線程就已經可以拿到新的Dom了。除非開發者讀取Dom的計算屬性，觸發了強制重流渲染線程才會打斷js線程。

總結

1. 首先timerFunc函數負責把回調函數們都丟到事件循環的隊尾

2. 然后，nextTick函數負責把回調函數們都保存起來。

3. 調用nextTick函數時會調用timerFunc函數

4. Vue更新Dom也會使用nextTick，而且在開發者調用nextTick之前。

5. 因為4中的先后關系和事件循環的隊列性質，確保了開發者的nextTick的回調一定在Dom更新之后

關于$nextTick在Vue中的作用是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。