VUE異步更新DOM

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

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

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

解決辦法

為了在數(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() 實(shí)例方法特別方便，因?yàn)樗恍枰?Vue，并且回調(diào)函數(shù)中的 this 將自動(dòng)綁定到當(dāng)前的 Vue 實(shí)例上：

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) // => '已更新'
   })
  }
 }
})

因?yàn)?$nextTick() 返回一個(gè) Promise 對(duì)象，所以你可以使用新的 ES2017 async/await 語(yǔ)法完成相同的事情：

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

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

知識(shí)拓展

在一個(gè)組件實(shí)例中，只有在data里初始化的數(shù)據(jù)才是響應(yīng)的，Vue不能檢測(cè)到對(duì)象屬性的添加或刪除，沒(méi)有在data里聲明的屬性不是響應(yīng)的。

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

數(shù)組數(shù)據(jù)變動(dòng)，使用某些方法操作數(shù)組，變動(dòng)數(shù)據(jù)時(shí)，有些方法無(wú)法被vue監(jiān)測(cè)

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

filter(), concat(), slice()。這些不會(huì)改變?cè)紨?shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組。

vue不能檢測(cè)以下變動(dòng)的數(shù)組：

1、當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，vm.items[indexOfItem] = newValue

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

對(duì)象屬性的添加或刪除

由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過(guò)程，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。

解決辦法：

使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上

Vue.set(vm.someObject, 'b', 2) 或者 this.$set(this.someObject,'b',2) （這也是全局 Vue.set 方法的別名）

異步更新隊(duì)列

在最新的項(xiàng)目中遇到了這種情況，數(shù)據(jù)第一次獲取到了，也渲染了，但是第二次之后數(shù)據(jù)只有在再一次渲染頁(yè)面的時(shí)候更新，并不能實(shí)時(shí)更新。

網(wǎng)上查了資料才知道，Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化，Vue 將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。

解決辦法：

可在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用。例如：

因?yàn)?$nextTick()返回一個(gè) Promise 對(duì)象，所以可以使用新的 ES2016 async/await語(yǔ)法完成相同的事情：

Object.assign方法

object.assign方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象，并返回目標(biāo)對(duì)象。

vm.object = Object.assign( { } , vm.object , {a:' 1 ', b:' 2 ' })

注：object必須是已經(jīng)聲明的對(duì)象

vue多層循環(huán)，動(dòng)態(tài)改變數(shù)據(jù)后渲染的很慢或者不渲染

可在動(dòng)態(tài)改變數(shù)據(jù)的方法，第一行加上

this.$forceUpdate();

以上這篇VUE異步更新DOM - 用$nextTick解決DOM視圖的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論