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

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

官方文檔對nextTick的解釋是：

在下次 DOM 更新循環(huán)結(jié)束之后執(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)的微任務(wù)的機制

所以，每當我們調(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]() }}pending

什么時候pending為true呢？

從timerFunc被調(diào)用到flushCallbacks被調(diào)用期間pending為true

即一個事件循環(huán)周期

在pending期間加入的回調(diào)函數(shù)，會被已經(jīng)等待執(zhí)行的flushCallbacks函數(shù)給執(zhí)行。

核心機制

看完源碼，發(fā)現(xiàn)除了利用了一個微任務(wù)的機制，和Dom更新一點關(guān)系都沒有哇。

其實調(diào)用nextTick的不僅是開發(fā)者，Vue更新Dom時，也用到了nextTick。

開發(fā)者更新綁定的數(shù)據(jù)之后，Vue就會立刻調(diào)用nextTick，把更新Dom的回調(diào)函數(shù)作為微任務(wù)塞到事件循環(huán)里去。

于是，在微任務(wù)隊列中，開發(fā)者調(diào)用的nextTick的回調(diào)函數(shù)，就一定在更行Dom的回調(diào)函數(shù)之后執(zhí)行了。

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

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

總結(jié) 首先timerFunc函數(shù)負責把回調(diào)函數(shù)們都丟到事件循環(huán)的隊尾 然后，nextTick函數(shù)負責把回調(diào)函數(shù)們都保存起來。 調(diào)用nextTick函數(shù)時會調(diào)用timerFunc函數(shù) Vue更新Dom也會使用nextTick，而且在開發(fā)者調(diào)用nextTick之前。 因為4中的先后關(guān)系和事件循環(huán)的隊列性質(zhì)，確保了開發(fā)者的nextTick的回調(diào)一定在Dom更新之后

以上就是解析Vue中的$nextTick的詳細內(nèi)容，更多關(guān)于Vue中的$nextTick的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！