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()，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 將開啟一個(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ì)象

關(guān)于Object.assign方法更多內(nèi)容，請(qǐng)?jiān)L問(wèn)《Object.assign()》

vue多層循環(huán)

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

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

this.$forceUpdate();

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

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

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

vm.$forceUpdate()

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

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

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

最新評(píng)論