Vue.nextTick 的原理和用途

fevin 發(fā)布于2019-08-22 13:51 / 1998人閱讀

摘要：在查詢了各種資料后，總結(jié)了一下其原理和用途，如有錯(cuò)誤，請不吝賜教。截取關(guān)鍵部分如下具體來說，異步執(zhí)行的運(yùn)行機(jī)制如下。知乎上的例子改變數(shù)據(jù)想要立即使用更新后的。需要注意的是，在和階段，如果需要操作渲染后的試圖，也要使用方法。

對于 Vue.nextTick 方法，自己有些疑惑。在查詢了各種資料后，總結(jié)了一下其原理和用途，如有錯(cuò)誤，請不吝賜教。

概覽

官方文檔說明：

用法：

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

疑問：

DOM 更新循環(huán)是指什么？

下次更新循環(huán)是什么時(shí)候？

修改數(shù)據(jù)之后使用，是加快了數(shù)據(jù)更新進(jìn)度嗎？

在什么情況下要用到？

原理 異步說明

Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進(jìn)行 DOM 的更新。

在 Vue 的文檔中，說明 Vue 是異步執(zhí)行 DOM 更新的。關(guān)于異步的解析，可以查看阮一峰老師的這篇文章。截取關(guān)鍵部分如下：

具體來說，異步執(zhí)行的運(yùn)行機(jī)制如下。

（1）所有同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧（execution context stack）。
（2）主線程之外，還存在一個(gè)"任務(wù)隊(duì)列"（task queue）。只要異步任務(wù)有了運(yùn)行結(jié)果，就在"任務(wù)隊(duì)列"之中放置一個(gè)事件。
（3）一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)讀取"任務(wù)隊(duì)列"，看看里面有哪些事件。那些對應(yīng)的異步任務(wù)，于是結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開始執(zhí)行。
（4）主線程不斷重復(fù)上面的第三步。

下圖就是主線程和任務(wù)隊(duì)列的示意圖。

事件循環(huán)說明

簡單來說，Vue 在修改數(shù)據(jù)后，視圖不會(huì)立刻更新，而是等同一事件循環(huán)中的所有數(shù)據(jù)變化完成之后，再統(tǒng)一進(jìn)行視圖更新。

知乎上的例子：

//改變數(shù)據(jù)
vm.message = "changed"

//想要立即使用更新后的DOM。這樣不行，因?yàn)樵O(shè)置message后DOM還沒有更新
console.log(vm.$el.textContent) // 并不會(huì)得到"changed"

//這樣可以，nextTick里面的代碼會(huì)在DOM更新后執(zhí)行
Vue.nextTick(function(){
    console.log(vm.$el.textContent) //可以得到"changed"
})

圖解：

事件循環(huán)：

第一個(gè) tick（圖例中第一個(gè)步驟，即"本次更新循環(huán)"）：

首先修改數(shù)據(jù)，這是同步任務(wù)。同一事件循環(huán)的所有的同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧，此時(shí)還未涉及 DOM 。

Vue 開啟一個(gè)異步隊(duì)列，并緩沖在此事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。

第二個(gè) tick（圖例中第二個(gè)步驟，即"下次更新循環(huán)"）：

同步任務(wù)執(zhí)行完畢，開始執(zhí)行異步 watcher 隊(duì)列的任務(wù)，更新 DOM 。Vue 在內(nèi)部嘗試對異步隊(duì)列使用原生的 Promise.then 和 MessageChannel 方法，如果執(zhí)行環(huán)境不支持，會(huì)采用 setTimeout(fn, 0) 代替。

第三個(gè) tick（圖例中第三個(gè)步驟）：

此時(shí)就是文檔所說的

下次 DOM 更新循環(huán)結(jié)束之后

此時(shí)通過 Vue.nextTick 獲取到改變后的 DOM 。通過 setTimeout(fn, 0) 也可以同樣獲取到。

簡單總結(jié)事件循環(huán)：

同步代碼執(zhí)行 -> 查找異步隊(duì)列，推入執(zhí)行棧，執(zhí)行Vue.nextTick[事件循環(huán)1] ->查找異步隊(duì)列，推入執(zhí)行棧，執(zhí)行Vue.nextTick[事件循環(huán)2]...

總之，異步是多帶帶的一個(gè)tick，不會(huì)和同步在一個(gè) tick 里發(fā)生，也是 DOM 不會(huì)馬上改變的原因。

對于事件循環(huán)，可以在這里查看更詳細(xì)的內(nèi)容： https://segmentfault.com/a/11...

用途

應(yīng)用場景：需要在視圖更新之后，基于新的視圖進(jìn)行操作。

created、mounted

需要注意的是，在 created 和 mounted 階段，如果需要操作渲染后的試圖，也要使用 nextTick 方法。

官方文檔說明：

注意 mounted 不會(huì)承諾所有的子組件也都一起被掛載。如果你希望等到整個(gè)視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted

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

其他應(yīng)用場景

其他應(yīng)用場景如下三例：

例子1：

點(diǎn)擊按鈕顯示原本以 v-show = false 隱藏起來的輸入框，并獲取焦點(diǎn)。

showsou(){
  this.showit = true //修改 v-show
  document.getElementById("keywords").focus()  //在第一個(gè) tick 里，獲取不到輸入框，自然也獲取不到焦點(diǎn)
}

修改為：

showsou(){
  this.showit = true
  this.$nextTick(function () {
    // DOM 更新了
    document.getElementById("keywords").focus()
  })
}

例子2：

點(diǎn)擊獲取元素寬度。


    {{ message }}
    


getMyWidth() {
    this.showMe = true;
    //this.message = this.$refs.myWidth.offsetWidth;
    //報(bào)錯(cuò) TypeError: this.$refs.myWidth is undefined
    this.$nextTick(()=>{
        //dom元素更新后執(zhí)行，此時(shí)能拿到p元素的屬性
        this.message = this.$refs.myWidth.offsetWidth;
  })
}

例子3：

使用 swiper 插件通過 ajax 請求圖片后的滑動(dòng)問題。

實(shí)例理解 nextTick 應(yīng)用

下面的例子來自 https://www.cnblogs.com/hity-...，稍有改動(dòng)。各位可以復(fù)制運(yùn)行一遍，加深理解。

結(jié)果：

參考文章

vue nextTick深入理解－vue性能優(yōu)化、DOM更新時(shí)機(jī)、事件循環(huán)機(jī)制；
JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop
知乎：vue.js$nextTick的一個(gè)問題
JS 事件循環(huán)機(jī)制 - 任務(wù)隊(duì)列、web API、JS主線程的相互協(xié)同