Vue 不能 watch 數組變化 和 對象變化的解決方案

vue監聽數組和對象的變化

監聽數組

1 直接賦值

data() {
    return {
      watchArr: []
    };
  },
  watch: {
    watchArr(newVal) {
      console.log("監聽：" + newVal);
    }
  },
  created() {
    this.watchArr = [1, 2, 3];
  },
複製代碼

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

data() {
    return {
      watchArr: [1, 2, 3],
    };
  },
  watch: {
    watchArr(newVal) {
      console.log("監聽：" + newVal);
    }
  },
  created() {
    this.watchArr.splice(0, 2, 3);
  },
複製代碼

3 push 數組也可以監聽到

---

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

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

  利用索引直接設置一個數組項時，例如：arr[indexOfItem] = newValue; 修改數組的長度時，例如：arr.length = newLength; 舉例沒法監聽數組變化的狀況

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

  data() {
      return {
        watchArr: [
          {
            name: "krry"
          }
        ]
      };
    },
    watch: {
      watchArr(newVal) {
        console.log("監聽：" + newVal);
      }
    },
    created() {
      this.watchArr[0].name = "xiaoyue";
    },
  複製代碼

  2 修改數組的長度

  長度大於原數組就將後續元素設置爲 undefined,
  長度小於原數組就將多餘元素截掉
  複製代碼

  data() {
      return {
        watchArr: [
          {
            name: "krry"
          }
        ]
      };
    },
    watch: {
      watchArr(newVal) {
        console.log("監聽：" + newVal);
      }
    },
    created() {
      this.watchArr.length = 5;
    },
  複製代碼

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

1  this.$set(arr, index, newVal);
2 使用數組 splice 方法能夠監聽，例子上面有
3 使用臨時變量直接賦值的方式，原理與直接賦值數組同樣
複製代碼

data() {
        return {
          watchArr: [
            {
              name: "krry"
            }
          ]
        };
      },
      watch: {
        watchArr(newVal) {
          console.log("監聽：" + newVal);
        }
      },
      created() {
        let temp = [...this.watchArr];
        temp[0] = {
          name: 'xiaoyue',
        };
        this.watchArr = temp;
      },
複製代碼

監聽對象

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

---

• 監聽對象的解決方法

  1 使用 this.set(obj, key, val) 來新增屬性（Vue 沒法監聽 this.set 修改原有屬性） 2 使用深度監聽 deep: true，只能監聽原有屬性的變化，不能監聽增長的屬性

watch: {
       obj: {
        // 這裏深度監聽變化，直接觸發下面方法
           handler(curVal, oldVal) {
         // TODO
           },
           deep: true,
           immediate: true // 是否第一次觸發
       }
   }
複製代碼

3 使用 Object.assign 方法，直接賦值的原理監聽（最推薦的方法）
複製代碼

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

4 直接 watch obj.key 監聽某個值的變化
複製代碼

watch: {
      'obj.name'(curVal, oldVal) {
        // TODO
      }
    }
複製代碼

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