本篇文章給大家分享一下Vue純干貨，介紹一下你不知道的Vue.nextTick，聊聊Vue.$nextTick的原理，希望對(duì)大家有所幫助！

原理性的東西就會(huì)文字較多，請(qǐng)耐下心來，細(xì)細(xì)品味

Vue中DOM更新機(jī)制

當(dāng)你氣勢(shì)洶洶地使用Vue大展宏圖的時(shí)候，突然發(fā)現(xiàn)，咦，我明明對(duì)這個(gè)數(shù)據(jù)進(jìn)行更改了，但是當(dāng)我獲取它的時(shí)候怎么是上一次的值（本人比較懶，就不具體舉例了?）

(資料圖片僅供參考)

此時(shí)，Vue就會(huì)說：“小樣，這你就不懂了吧，我的DOM是異步更新的呀?。?！”

簡(jiǎn)單的說，Vue的響應(yīng)式并不是只數(shù)據(jù)發(fā)生變化之后，DOM就立刻發(fā)生變化，而是按照一定的策略進(jìn)行DOM的更新。這樣的好處是可以避免一些對(duì)DOM不必要的操作，提高渲染性能?！鞠嚓P(guān)推薦：vuejs視頻教程、web前端開發(fā)】

在Vue官方文檔中是這樣說明的：

白話一點(diǎn)就是說，其實(shí)這是和JS當(dāng)中的事件循環(huán)是息息相關(guān)的，就是Vue不可能對(duì)每一個(gè)數(shù)據(jù)變化都做一次渲染，它會(huì)把這些變化先放在一個(gè)異步的隊(duì)列當(dāng)中，同時(shí)它還會(huì)對(duì)這個(gè)隊(duì)列里面的操作進(jìn)行去重，比如你修改了這個(gè)數(shù)據(jù)三次，它只會(huì)保留最后一次。這些變化是都可以通過隊(duì)列的形式保存起來，那現(xiàn)在的問題就來到了，那vue是在事件循環(huán)的哪個(gè)時(shí)機(jī)來對(duì)DOM進(jìn)行修改呢？

Vue有兩種選擇，一個(gè)是在本次事件循環(huán)的最后進(jìn)行一次DOM更新，另一種是把DOM更新放在下一輪的事件循環(huán)當(dāng)中。z這時(shí)，尤雨溪拍了拍胸脯說：“這兩種方法，我都有!” 但是因?yàn)楸据喪录h(huán)最后執(zhí)行會(huì)比放在下一輪事件循環(huán)要快很多，所以Vue優(yōu)先選擇第一種，只有當(dāng)環(huán)境不支持的時(shí)候才觸發(fā)第二種機(jī)制。（??開頭的鏈接讓你懂事件循環(huán)）

雖然性能上提高了很多，但這個(gè)時(shí)候問題就出現(xiàn)了，我們都知道在一輪事件循環(huán)中，同步執(zhí)行棧中代碼執(zhí)行完成之后，才會(huì)執(zhí)行異步隊(duì)列當(dāng)中的內(nèi)容，那我們獲取DOM的操作是一個(gè)同步的呀??！那豈不是雖然我已經(jīng)把數(shù)據(jù)改掉了，但是它的更新異步的，而我在獲取的時(shí)候，它還沒有來得及改，所以會(huì)出現(xiàn)文章開頭的那個(gè)問題。

這。。。我確實(shí)需要進(jìn)行這樣操作，那這么辦呢？？

沒關(guān)系啦，尤大很貼心的為我們提供了Vue.$nextTick()

Vue.$nextTick()

其實(shí)一句話就可以把$nextTick這個(gè)東西講明白：就是你放在$nextTick當(dāng)中的操作不會(huì)立即執(zhí)行，而是等數(shù)據(jù)更新、DOM更新完成之后再執(zhí)行，這樣我們拿到的肯定就是最新的了。

再準(zhǔn)確一點(diǎn)來講就是$nextTick方法將回調(diào)延遲到下次DOM更新循環(huán)之后執(zhí)行。（看不懂這句人話的，可以看上面[狗頭]）

意思我們都懂了，那$nextTick是怎樣完成這個(gè)神奇的功能的呢？ 核心如下：

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

仔細(xì)地看這句話，你就可以發(fā)現(xiàn)這不就是利用 JavaScript 的這些異步回調(diào)任務(wù)隊(duì)列，來實(shí)現(xiàn) Vue 框架中自己的異步回調(diào)隊(duì)列。這其實(shí)就是一個(gè)典型的將底層 JavaScript 執(zhí)行原理應(yīng)用到具體案例中的示例。

我在這里稍微總結(jié)一下：就是$nextTick將回調(diào)函數(shù)放到微任務(wù)或者宏任務(wù)當(dāng)中以延遲它地執(zhí)行順序；（總結(jié)的也比較懶?）

重要的是理解源碼中它的三個(gè)參數(shù)的意思：

理解之后，在看整個(gè)$nextTick里面的執(zhí)行過程，其實(shí)就是把一個(gè)個(gè)$nextTick中的回調(diào)函數(shù)壓入到callback隊(duì)列當(dāng)中，然后根據(jù)事件的性質(zhì)等待執(zhí)行，輪到它執(zhí)行的時(shí)候，就執(zhí)行一下，然后去掉callback隊(duì)列中相應(yīng)的事件。

使用

說了這么多，怎么用它呢？ 很簡(jiǎn)單很簡(jiǎn)單

mounted: function () {  this.$nextTick(function () {    // Code that will run only after the    // entire view has been rendered  })}

使用場(chǎng)景

created中獲取DOM的操作需要使用它

就是我們上面的例子，你如果想要獲取最新值，就用它

還有一些第三方插件使用過程中，使用到的情況，具體問題具體分析

參考 前端進(jìn)階面試題詳細(xì)解答

補(bǔ)充

之前我一直搞不懂一個(gè)的問題，$nextTick既然把它傳入的方法變成微任務(wù)了，那它和其它微任務(wù)的執(zhí)行順序是怎樣的呢？

這簡(jiǎn)單來說就是誰先掛載Promise對(duì)象的問題，在調(diào)用$nextTick方法時(shí)就會(huì)將其閉包內(nèi)部維護(hù)的執(zhí)行隊(duì)列掛載到Promise對(duì)象，在數(shù)據(jù)更新時(shí)Vue內(nèi)部首先就會(huì)執(zhí)行$nextTick方法，之后便將執(zhí)行隊(duì)列掛載到了Promise對(duì)象上，其實(shí)在明白Js的Event Loop模型后，將數(shù)據(jù)更新也看做一個(gè)$nextTick方法的調(diào)用，并且明白$nextTick方法會(huì)一次性執(zhí)行所有推入的回調(diào)，就可以明白執(zhí)行順序的問題了

還有$nextTick和nextTick區(qū)別就是nextTick多了一個(gè)context參數(shù)，用來指定上下文。但兩個(gè)的本質(zhì)是一樣的，$nextTick是實(shí)例方法，nextTick是類的靜態(tài)方法而已；實(shí)例方法的一個(gè)好處就是，自動(dòng)給你綁定為調(diào)用實(shí)例的this罷了。

（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）

以上就是帶你深入了解Vue.$nextTick（原理淺析）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞： $nextTick Vue.js