vue比較常見的坑就是資料（後臺返回）更新了，但是UI介面並沒有更新，常見於以下情況：

一、資料為陣列時

1.通過陣列索引修改陣列元素例如：

此時UI資料並不會重新整理

2.修改陣列長度時：

解決方案：

如果data為JSON陣列則如下：

第一個引數為要更新資料的陣列，第二個引數為要更新的陣列中具體的元素下標，第三個引數為新資料

備註:

陣列原型上的方法vue可直接檢測到變化：push(),pop(),shift(),unshift(),splice(),sort()

二、資料為物件時:

Vue 不能檢測物件屬性的新增或刪除：你可以這樣新增一個屬性

如果要新增多個屬性可以

補充知識：

computed計算屬性

計算屬性類似於方法，用於輸出data中定義的屬性資料的結果，data資料變化時，計算屬性的結果會同步變化，需要注意的是計算屬性不可與data定義的屬性同名。

相比於方法它的優勢是隻有當依賴的屬性變化時，才會重新計算。而方法會在每次重新render的時候都會執行，因此計算屬性相比方法效能明顯更高，而且計算屬

性可直接繫結在v-model屬性上。計算屬性還提供get和set方法進行讀寫操作。

watch方法

一旦監聽了data中的屬性，只要data資料變化了會立即觸發watch方法，watch方法不僅可以監聽變數，還可以監聽物件裡的某個屬性，甚至是數組裡的某個元素

html:

javascript:

以上這篇vue資料更新UI不重新整理顯示的解決辦法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。