watch 怎么深度监听对象变化？（精选-持续更新中---）

1. 深度监听

• handler：其值是一个回调函数。监听到变化时应该执行的函数。

• deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）

• immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

• 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时需要deep属性对对象进行深度监听

2. 演示代码如下：

<template>
  <div class="watch">
    <button @click="changeName">修改obj.name</button>
    <input type="text" v-model="obj.name" />
    <button @click="changeSex">修改obj.sex</button>
    <input type="text" v-model="obj.sex" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: "温情",
        sex: "男",
      },
    };
  },

 watch: {
    obj: {
      handler(newValue, oldValue) {
        console.log("obj 发生了变化");
      },
      deep: true,
      immediate: true,
    },
},

  methods: {
    changeName() {
      this.obj.name += "1";
    },
    changeSex() {
      this.obj.sex += "1";
    },
  },
};
</script>

 需要注意得到是 handler 是固定写法，不能用其他的。

 

 immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
上面的视图里 之所以刷新马上就执行了 handler函数，就是因为设置了 immediate 属性为 true