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ù)組。當使用非變異方法時，可以用新數(shù)組替換舊數(shù)組。

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

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

2、當你修改數(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方法用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象，并返回目標對象。

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ù)沒有自動更新，需手動強制刷新

vm.$forceUpdate()

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

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

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

最新評論