data() { // data數(shù)據(jù)

return {

arr: [1,2,3],

obj:{

a: 1,

b: 2

}

};

},

// 數(shù)據(jù)更新 數(shù)組視圖不更新

this.arr[0] = 'OBKoro1';

this.arr.length = 1;

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

// 數(shù)據(jù)更新 對象視圖不更新

this.obj.c = 'OBKoro1';

delete this.obj.a;

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

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

解決方式:

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

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

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

2.數(shù)組原生方法觸發(fā)視圖更新

vue可以監(jiān)聽到數(shù)組原生方法導致的數(shù)據(jù)數(shù)據(jù)變化

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

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

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

3.替換數(shù)組/對象

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

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

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

總結

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

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