在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue的watch對(duì)象問題

vue的watch對(duì)象問題

<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>

控制臺(tái)打印的是

clipboard.png

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

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

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

這句代碼會(huì)觸發(fā)this.obj._ob_.dep的notify()方法（簡(jiǎn)單理解就是this.obj的值改變了觸發(fā)更新）,因?yàn)榈谝徊絫his.obj的childOb.dep已經(jīng)收集到了計(jì)算屬性attr2的Watcher，所以會(huì)觸發(fā)計(jì)算屬性attr2的更新。
3、
因?yàn)?/p> 

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

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

注意：this.obj.attr2和計(jì)算屬性attr2是兩個(gè)不同的屬性，樓主的命名有點(diǎn)讓人迷惑- -。

2018年8月15日 00:38