vue中watch的handler，deep，immediate用法详解

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

handler

我们平时的写法，就默认写的是handler，vue.js会处理这个逻辑，最终编译出来就是这个handler

  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后，就可以得到我们想要的结果了，可以监听到对象属性的变化