鍍金池/ 問答/HTML/ vue的watch對象問題

vue的watch對象問題

<template>
  <div>
   <button @click="changeObj">click</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      obj: {
        attr1: {},
        attr2: {}
      }
    };
  },
  computed: {
    attr2() {
      return this.obj.attr2;
    }
  },
  mounted() {
    // this.obj = this.obj1;
  },
  watch: {
    attr2: {
      deep: true,
      handler(o, v) {
        console.log("change");
        console.log(o);
        console.log(v);
      }
    }
  },
  methods: {
    changeObj() {
      this.$set(this.obj, "attr3", {});
    }
  }
};
</script>

控制臺打印的是

clipboard.png

在我點擊之后為什么可以監(jiān)聽到attr2的變化?
有什么辦法可以讓attr2不發(fā)生變化呢？（即一個對象的各個屬性都是獨立監(jiān)聽）
回答
編輯回答
涼心人
  watch: {
    'obj.attr1': { //'對象.要監(jiān)聽的屬性名'
      immediate: true,
      handler(val) {
        
      }
    }
  },
2018年5月27日 07:36
編輯回答
咕嚕嚕
在我點擊之后為什么可以監(jiān)聽到attr2的變化?

拋磚引玉，在這說一下自己對第一個問題的粗淺理解,有不對的地方希望大家批評指正。
1、初始化計算屬性attr2的時候，attr2的Watcher會被（this.obj的dep、childOb.dep）和（this.obj.attr2的dep、childOb.dep）收集到。這樣就保證了一旦this.obj或this.obj.attr2的值有變化，會更新計算屬性attr2。
2、

this.$set(this.obj, "attr3", {});

這句代碼會觸發(fā)this.obj._ob_.dep的notify()方法（簡單理解就是this.obj的值改變了觸發(fā)更新）,因為第一步this.obj的childOb.dep已經(jīng)收集到了計算屬性attr2的Watcher，所以會觸發(fā)計算屬性attr2的更新。
3、
因為

watch: {
    attr2: {
      deep: true,
      handler(o, v) {
        console.log("change");
        console.log(o);
        console.log(v);
      }
    }
  },

在此watch了attr2的變化，因此觸發(fā)了回調(diào)，監(jiān)聽到了計算屬性attr2的變化。

注意：this.obj.attr2和計算屬性attr2是兩個不同的屬性，樓主的命名有點讓人迷惑- -。

2018年8月15日 00:38