Vue - watch监听对象变化

1.  监听非对象的属性

    监听props-msg和data，分别是String和Number属性；可以正常监听到变化

// Parent
<template>
  <div id="app">
    <HelloWorld :msg="msg" />
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  components: {
    HelloWorld,
  },
  data() {
    return {
      msg: "mesaage",
    };
  },
  mounted() {
    setTimeout(() => {
      this.msg = "111";
    }, 1000);
  },
};
</script>

// Child
<script>
export default {
  props: ["msg"],
  data() {
    return {
      data: 1,
    };
  },
  watch: {
    msg(v) {
      console.log("props msg:", v);
    },
    data(v) {
      console.log("data data:", v);
    },
  },
  mounted() {
    setTimeout(() => {
      this.data = 2;
    }, 1000);
  },
};
</script>

2. 监听对象

   2.1 ：直接为监听的对象绑定新的属性，watch监听不到；因为Vue 不能检测数组和对象的变化；

• 重新赋值：this.msg.a = 1  改为：this.msg= { a: 1 }
• 使用$set：this.data.a = 1  改为：this.$set(this.data, 'a', 1)

// Parent
data() {
    return {
      msg: {},
    };
},
mounted() {
    setTimeout(() => {
      // this.msg.a = 1;
      this.msg= { a: 1 }
    }, 1000);
}

// Child
props: ["msg"],
data() {
  return {
    data: {},
  };
},
watch: {
  msg(v) {
    console.log("props msg:", v);
  },
  data(v) {
    console.log("data data:", v);
  },
},
mounted() {
  setTimeout(() => {
    // this.data.a = 1;
    this.$set(this.data, 'a', 1)
  }, 1000);
},

3. 监听对象的属性

   3.1：同上一样监听不到变化

• watch添加deep属性，对对象的属性进行监听；

data() {
  return {
    data: {a:1},
  };
},
watch: {
  //data(v) {
  //  console.log("data data:", v);
  //},
  data:{
    deep:true,
    handler(v){
      console.log(v);
    }
  }
},
mounted() {
  setTimeout(() => {
    this.data.a = 2;
  }, 1000);
},