vue属性信息/子属性信息监听watchの几种方法

205次阅读

特殊字符法

特殊字符+deep法

直接deep法

常规法

直接用如下代码示例吧：

    data(){   
       return {
            goBackHeader:'添加排班',
            scheduleForm:{
                scheduleName:null,
                scheduleSimpleName:null,
                departId:null,
                departName:null,
                attenddance:{
                    name1:'白班开始',
                    name2:'中班开始',
                    name3:'晚班开始',
                    name4:'夜班开始',
                    startTime1:null,
                    endTime1:null,
                    startTime2:null,
                    endTime2:null,
                    startTime3:null,
                    endTime3:null,
                    startTime4:null,
                    endTime4:null                                                                        
                },
                // 休息时间
                hasBreakTime:false,
                breakTime:[{start:null,end:null}]
            }
        }
    },
    watch:{
        // ### 特殊字符法 ### --仅监听scheduleForm.hasBreakTime属性信息
        'scheduleForm.hasBreakTime'(newVal,oldVal){
            console.log(newVal,oldVal);
        },
        // ### 特殊字符+deep法 ### --监听scheduleForm.attenddance下の所有子属性信息(耗费较多性能)
        'scheduleForm.attenddance':{
            handler(newVal,oldVal){
                console.log(newVal,oldVal);
                
            },
            deep:true
        }
        // ### 直接deep法 ### --监听scheduleForm下の所有子属性信息(耗费较多性能)
        scheduleForm:{
            handler(newVal,oldVal){
                console.log(newVal,oldVal);
                
            },
            deep:true
        },
        // ### 常规法 ### --仅监听goBackHeader属性信息
        goBackHeader(newVal,oldVal){
            console.log(newVal,oldVal);
        }
    }

发表于：技术分享

2022-08-12

复制链接

赏