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

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

handler

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

watch: {
    // 通过输入框文字的变化，来改变下面的数据
    ipt: {
      handler(newVal,oldVal) {
        // 数据更新时处理
          console.log(111)
      },
      immediate:false, //值为true或false，默认false
      deep:false    //值为true或false，默认false
    }
  }

immediate

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

immediate为false：

 

immediate为true：

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

 

 

deep

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

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

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

把deep设为true

就可以得到我们想要的结果了，可以监听到对象属性的变化