vue對象數組數據變化，頁面不渲染

很多時候，我們習慣於這樣操作數組和對象:

 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 不能檢測以上數組的變動，以及對象的添加/刪除，很多人會因為像上面這樣操作，出現視圖沒有更新的問題。

解決方式:

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

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

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

　　　　vue可以監聽到以下數組原生方法導致的數據數據變化，因為vue重寫了這幾個方法

　　

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

 

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

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

3.替換數組/對象

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