VUE異步更新DOM - 用$nextTick解決DOM視圖的問題

更新時間：2020年11月06日 16:24:10 作者：Calla_Lj

這篇文章主要介紹了VUE異步更新DOM - 用$nextTick解決DOM視圖的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

VUE異步更新DOM

首先，Vue 在更新 DOM 時是異步執(zhí)行的！

所以只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次。這種在緩沖時去除重復數(shù)據(jù)對于避免不必要的計算和 DOM 操作是非常重要的。然后，在下一個的事件循環(huán)“tick”中，Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作。Vue 在內(nèi)部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執(zhí)行環(huán)境不支持，則會采用 setTimeout(fn, 0) 代替。

例如，當你設置 vm.someData = ‘new value'，該組件不會立即重新渲染。當刷新隊列時，組件會在下一個事件循環(huán)“tick”中更新。多數(shù)情況我們不需要關心這個過程，但是如果你想基于更新后的 DOM 狀態(tài)來做點什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發(fā)人員使用“數(shù)據(jù)驅動”的方式思考，避免直接接觸 DOM，但是有時我們必須要這么做。

解決辦法

為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)。這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用。

例如：

<div id="example">{{message}}</div>

var vm = new Vue({
 el: '#example',
 data: {
  message: '123'
 }
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
 vm.$el.textContent === 'new message' // true
})

在組件內(nèi)使用 vm.$nextTick() 實例方法特別方便，因為它不需要全局 Vue，并且回調(diào)函數(shù)中的 this 將自動綁定到當前的 Vue 實例上：

Vue.component('example', {
 template: '<span>{{ message }}</span>',
 data: function () {
  return {
   message: '未更新'
  }
 },
 methods: {
  updateMessage: function () {
   this.message = '已更新'
   console.log(this.$el.textContent) // => '未更新'
   this.$nextTick(function () {
    console.log(this.$el.textContent) // => '已更新'
   })
  }
 }
})

因為 $nextTick() 返回一個 Promise 對象，所以你可以使用新的 ES2017 async/await 語法完成相同的事情：

methods: {
 updateMessage: async function () {
  this.message = '已更新'
  console.log(this.$el.textContent) // => '未更新'
  await this.$nextTick()
  console.log(this.$el.textContent) // => '已更新'
 }
}

補充知識：Vue數(shù)據(jù)更新視圖不更新，你必須知道的幾種解決方案

知識拓展

在一個組件實例中，只有在data里初始化的數(shù)據(jù)才是響應的，Vue不能檢測到對象屬性的添加或刪除，沒有在data里聲明的屬性不是響應的。

Vue不允許在已經(jīng)創(chuàng)建的實例上動態(tài)添加根級響應式屬性，但是可以使用$set方法將相應屬性添加到嵌套的對象上。

數(shù)組數(shù)據(jù)變動，使用某些方法操作數(shù)組，變動數(shù)據(jù)時，有些方法無法被vue監(jiān)測

push()，pop()，shift()，unshift()，splice()，sort()，reverse()可被vue檢測到

filter(), concat(), slice()。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組。當使用非變異方法時，可以用新數(shù)組替換舊數(shù)組。

vue不能檢測以下變動的數(shù)組：

1、當你利用索引直接設置一個項時，vm.items[indexOfItem] = newValue

2、當你修改數(shù)組的長度時，例如： vm.items.length = newLength

對象屬性的添加或刪除

由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。