vue关于watch的详谈对象属性的监听

本文链接：https://blog.csdn.net/qq_39540631/article/details/107980123

data() { 
    return{
        formData: {
          // TODO start 定义自己的表单对象属性
          id: "",
          code: "",
          name: "",
          photo: "",
          loginName: "",
          password: "",
          confirmPassword: "",
          nativePlace: "",
          birth: "",
          email: ""
        }
    }
}

当前是想在一个vue的表单页面通过表单所改变的内容来确认是否屏蔽提交按钮。

于是用上了watch进行监听对象的某个必填属性的变化。

 'formData.code':{
        handler(newValue, oldValue){
          debugger;
          console.log(newValue);
        },
        deep:true
      }
    }

法2：通过computed属性和watch进行配合获取对象的属性监听

watch:{
    isExternalUnit:{
        handler(newValue, oldValue){
          // debugger;
          console.log(newValue);
        },
        deep:true
      }
    }
}

computed:{
     isExternalUnit(){
       
        return this.formData.isExternalUnit;
      }
}

以上俩种方法均可对对象中的属性进行监听。

对该对象的code属性进行监听。然后测试一下,实测是没有问题的，然后去进行了对watch里面的属性的探究

deep属性就常用于对象内部属性的监听，进行深度监听。但是深度监听的话，会严重的影响性能，所以一般开发不需要deep属性

但是这样去使用watch是有一个特点，就是当值第一次进行绑定的时候，不会去执行监听函数，只有值发生改变的时候才会执行。

解决方法就是要将immediate设置为true

'formData.isExternalUnit':{
        handler(newValue, oldValue){
          // debugger;
          console.log(newValue);
        },
        deep:true,
        immediate:true
      }
  },

监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。