vue數(shù)據(jù)更新UI不刷新顯示的解決辦法

vue比較常見(jiàn)的坑就是數(shù)據(jù)（后臺(tái)返回）更新了，但是UI界面并沒(méi)有更新，常見(jiàn)于以下情況：

一、數(shù)據(jù)為數(shù)組時(shí)

1.通過(guò)數(shù)組索引修改數(shù)組元素例如：

此時(shí)UI數(shù)據(jù)并不會(huì)刷新

2.修改數(shù)組長(zhǎng)度時(shí)：

解決方案：

如果data為JSON數(shù)組則如下：

第一個(gè)參數(shù)為要更新數(shù)據(jù)的數(shù)組，第二個(gè)參數(shù)為要更新的數(shù)組中具體的元素下標(biāo)，第三個(gè)參數(shù)為新數(shù)據(jù)

備注:

數(shù)組原型上的方法vue可直接檢測(cè)到變化：push(),pop(),shift(),unshift(),splice(),sort()

二、數(shù)據(jù)為對(duì)象時(shí):

Vue 不能檢測(cè)對(duì)象屬性的添加或刪除：你可以這樣添加一個(gè)屬性

如果要添加多個(gè)屬性可以

補(bǔ)充知識(shí)：vue computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性解疑答惑

computed計(jì)算屬性

計(jì)算屬性類似于方法，用于輸出data中定義的屬性數(shù)據(jù)的結(jié)果，data數(shù)據(jù)變化時(shí)，計(jì)算屬性的結(jié)果會(huì)同步變化，需要注意的是計(jì)算屬性不可與data定義的屬性同名。

相比于方法它的優(yōu)勢(shì)是只有當(dāng)依賴的屬性變化時(shí)，才會(huì)重新計(jì)算。而方法會(huì)在每次重新render的時(shí)候都會(huì)執(zhí)行，因此計(jì)算屬性相比方法性能明顯更高，而且計(jì)算屬

性可直接綁定在v-model屬性上。計(jì)算屬性還提供get和set方法進(jìn)行讀寫(xiě)操作。

watch方法

一旦監(jiān)聽(tīng)了data中的屬性，只要data數(shù)據(jù)變化了會(huì)立即觸發(fā)watch方法，watch方法不僅可以監(jiān)聽(tīng)變量，還可以監(jiān)聽(tīng)對(duì)象里的某個(gè)屬性，甚至是數(shù)組里的某個(gè)元素

html:

javascript:

以上這篇vue數(shù)據(jù)更新UI不刷新顯示的解決辦法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。