data() { // data數據

return {

arr: [1,2,3],

obj:{

a: 1,

b: 2

}

};

},

// 數據更新 數組視圖不更新

this.arr[0] = 'OBKoro1';

this.arr.length = 1;

console.log(arr);// ['OBKoro1'];

// 數據更新 對象視圖不更新

this.obj.c = 'OBKoro1';

delete this.obj.a;

console.log(obj); // {b:2,c:'OBKoro1'}

由于js的限制，Vue 不能檢測以上數組的變動，以及對象的添加/刪除，很多人會因為像上面這樣操作，出現視圖沒有更新的問題。

解決方式:

this.$set(你要改變的數組/對象，你要改變的位置/key，你要改成什么value)

this.$set(this.arr, 0, "OBKoro1"); // 改變數組

this.$set(this.obj, "c", "OBKoro1"); // 改變對象

2.數組原生方法觸發視圖更新

vue可以監聽到數組原生方法導致的數據數據變化

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

意思是使用這些方法不用我們再進行額外的操作，視圖自動進行更新。

推薦使用splice方法會比較好自定義,因為slice可以在數組的任何位置進行刪除/添加操作

3.替換數組/對象

比方說:你想遍歷這個數組/對象，對每個元素進行處理，然后觸發視圖更新。

標簽：arr,vue,obj,數組,渲染,視圖,更新,OBKoro1,頁面

來源： https://www.cnblogs.com/monkeySoft/p/13037559.html

總結

以上是生活随笔為你收集整理的vue数组变化视图_vue对象数组数据变化，页面不渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。