Vue數(shù)據(jù)更新視圖不更新的幾種解決

知識拓展

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

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

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

push()，pop()，splice()，sort()，reverse()可被vue檢測到 filter(), concat(), slice()。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組。當(dāng)使用非變異方法時，可以用新數(shù)組替換舊數(shù)組。

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

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

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

對象屬性的添加或刪除

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

解決辦法：

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

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

異步更新隊列

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

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

解決辦法：

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

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

Object.assign方法

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

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

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

關(guān)于Object.assign方法更多內(nèi)容，請訪問《Object.assign()》

vue多層循環(huán)

動態(tài)改變數(shù)據(jù)后渲染的很慢或者不渲染

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

this.$forceUpdate();

Vue更改了數(shù)據(jù)但是視圖卻沒有更新

1.Vue不能檢測到對象屬性的添加或刪除，沒有在對象里聲明的屬性不是響應(yīng)的。

2.用在v-for里面數(shù)據(jù)層次太多，render函數(shù)沒有自動更新，需手動強(qiáng)制刷新

vm.$forceUpdate()

迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。

https://cn.vuejs.org/v2/api/#vm-forceUpdate

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論