Vue - watch监听对象变化

蔚落 2022-12-23 03:53 278阅读 0赞

### 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);
    },