本文共 1545 字，大约阅读时间需要 5 分钟。

我们使用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：

deep

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

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

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

转载地址：http://twrgn.baihongyu.com/