VUE 监听 对象属性值变化的三种方式

Posted 2020-12-09 zyfenblog

示例：

监听一下对象 formCode 中 属性 application 的变化：

<script>
export default{
    data(){
        return{
            formCode:{
                application:"",
                oldcode:"",
                newcode:""
            }
        ｝
    ｝
｝
</script>

 

第一种方式：watch 结合 computed

computed:{
    application(){
        return this.formCode.application
    }        
},
watch:{
    application:function(val){
         console.log(val)
    }
｝

 

第二种方式： 使用 deep

watch:{
　　formCode:{

    　　handler(newVal){
        　　console.log(newVal)
    　　},
    　　deep:true
　　}

}

 

第三种方式：

watch:{
　　‘formCode.application‘(newVal,oldVal){

    　　if(newVal != oldVal && newVal != ""){
        　　this.vDisable = false;
        　　var appName = newVal.split("-")[0]
        　　this.getVersionData(appName)
    　　}
　　}  

}