關於 vue 不能 watch 數組變化 和 對象變化的解決方案

原文地址：關於 vue 不能 watch 數組變化 和 對象變化的解決方案

 

vue 監聽數組和對象的變化

vue 監聽數組

vue 實際上能夠監聽數組變化，好比：

data () {
  return {
    watchArr: [],
  };
},
watchArr (newVal) {
  console.log('監聽：' + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr = [1, 2, 3];
  }, 1000);
},

 

再如使用 splice(0, 2, 3) 從數組下標 0 刪除兩個元素，並在下標 0 插入一個元素 3：

data () {
  return {
    watchArr: [1, 2, 3],
  };
},
watchArr (newVal) {
  console.log('監聽：' + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr.splice(0, 2, 3);
  }, 1000);
},

 

push 數組也可以監聽到

 

vue 沒法監聽數組變化的狀況

可是，數組在下面兩種狀況沒法監聽：

1. 利用索引直接設置一個數組項時，例如：arr[indexOfItem] = newValue;
2. 修改數組的長度時，例如：arr.length = newLength;

 

舉例沒法監聽數組變化的狀況

1. 利用索引直接修改數組值

   data () {
     return {
       watchArr: [{
         name: 'krry',
       }],
     };
   },
   watchArr (newVal) {
     console.log('監聽：' + newVal);
   },
   created () {
     setTimeout(() => {
       this.watchArr[0].name = 'xiaoyue';
     }, 1000);
   },

    

2. 修改數組的長度
   長度大於原數組就將後續元素設置爲 undefined
   長度小於原數組就將多餘元素截掉

   data () {
     return {
       watchArr: [{
         name: 'krry',
       }],
     };
   },
   watchArr (newVal) {
     console.log('監聽：' + newVal);
   },
   created () {
     setTimeout(() => {
       this.watchArr.length = 5;
     }, 1000);
   },

    

　　　　上面的 watchArr 變成
　　　　

vue 沒法監聽數組變化的解決方案

1. this.$set(arr, index, newVal);

   data () {
     return {
       watchArr: [{
         name: 'krry',
       }],
     };
   },
   watchArr (newVal) {
     console.log('監聽：' + newVal);
   },
   created () {
     setTimeout(() => {
       this.$set(this.watchArr, 0, {name: 'xiaoyue'});
     }, 1000);
   },

    

2. 使用數組 splice 方法能夠監聽，例子上面有

3. 使用臨時變量直接賦值的方式，原理與直接賦值數組同樣

   data () {
     return {
       watchArr: [{
         name: 'krry',
       }],
     };
   },
   watchArr (newVal) {
     console.log('監聽：' + newVal);
   },
   created () {
     setTimeout(() => {
       let temp = [...this.watchArr];
       temp[0] = {
         name: 'xiaoyue',
       };
       this.watchArr = temp;
     }, 1000);
   },

    

vue 監聽對象

vue 能夠監聽直接賦值的對象

this.watchObj = {name: 'popo'};

 

vue 不能監聽對象屬性的添加、修改、刪除

vue 監聽對象的解決方法

1. 使用 this.$set(object, key, value)
2. 使用深度監聽 deep: true，只能監聽原有屬性的變化，不能監聽增長的屬性

   mounted () {
     // 這裏使用深度監聽 blog 對象的屬性變化，會觸發 getCatalog 方法
     this.$watch('blog', this.getCatalog, {
       deep: true,
     });
   },

    

3. 使用 this.set(obj, key, val) 來新增屬性（vue 沒法監聽 this.set 修改原有屬性）

   this.$set(this.watchObj, 'age', 124);

delete this.watchObj[‘name’]（vue 沒法監聽 delete 關鍵字來刪除對象屬性）

4. 使用 Object.assign 方法，直接賦值的原理監聽（最推薦的方法）

   this.watchObj = Object.assign({}, this.watchObj, {
     name: 'xiaoyue',
     age: 15,
   });

    

原文地址：

關於 vue 不能 watch 數組變化 和 對象變化的解決方案