我们使用vue的watch监听数据时 有三个选项，handler，deep，immediate

我们使用watch监听数据时，有三个选项，handler，deep，immediate

handler
我们平时的写法，就默认写的是handler，vue.js会处理这个逻辑，最终编译出来就是这个handler（可参考我上篇文章的watch）

 

watch: {
    // 通过输入框文字的变化，来改变下面的数据
    ipt: {
      handler(newVal,oldVal) {
          console.log(111)
        if (newVal == "小红") {
          this.name = "小红";
          this.gender = "女";
          this.age = 18;
          this.height = 160;
        } else {
          this.name = "无";
          this.gender = "无";
          this.age = "无";
          this.height = "无";
        }
      },
      immediate:false, //值为true或false，默认false
      deep:false    //值为true或false，默认false
    }
  },

  
  //当immediate和deep都为false时，上下两种写法效果一样
  
   

watch:{
        // 通过输入框文字的变化，来改变下面的数据
        ipt(val){
          if(val == '小红'){
            this.name = '小红'
            this.gender = '女'
            this.age = 18
            this.height = 160
          }else{
            this.name = '无'
            this.gender = '无'
            this.age = '无'
            this.height = '无'
          }
        }
  },

immediate
该值默认是false，在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作，我们来输出看一下

immediate为false：

 

immediate为true：
我们可以看到，handler会在第一次绑定值时就触发

deep
vue是不能检测到对象属性的添加或删除，我们使用watch监听一个对象时，除非是直接重新给对象赋值，否则是不能监听到对象里的值的变化的

 

deep就是用来进行深度监听的！

我们绑定一个对象，修改对象里面的值，看下deep为false时的效果（其实就是毫无效果）：

<template>
  <div>
    <div>
      <input type="text" v-model="ipt.text" />
      <p>
        姓名
        <b>{{name}}</b>
      </p>
      <p>
        性别
        <b>{{gender}}</b>
      </p>
      <p>
        年龄
        <b>{{age}}</b>
      </p>
      <p>
        身高
        <b>{{height}}</b>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "小明",
      gender: "男",
      age: "26",
      height: "180",
      ipt: {
        text:'小明'
      }
    };
  },
  watch: {
    // 通过输入框文字的变化，来改变下面的数据
    ipt: {
      handler(newVal,oldVal) {
        console.log(111)
        if (newVal.text == "小红") {
          this.name = "小红";
          this.gender = "女";
          this.age = 18;
          this.height = 160;
        } else {
          this.name = "无";
          this.gender = "无";
          this.age = "无";
          this.height = "无";
        }
      },
      immediate:false,
      deep:false
    }
  },
  methods: {}
};
</script>

 

把deep设为true后，就可以得到我们想要的结果了，可以监听到对象属性的变化

 

————————————————
版权声明：本文为CSDN博主「xx_小熊」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42975998/article/details/104565720