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

29次阅读
没有评论
  1. 特殊字符法

  2. 特殊字符+deep法

  3. 直接deep法

  4. 常规法

直接用如下代码示例吧:

    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);
        }
    }

 

facingscreen
版权声明:本站原创文章,由 facingscreen2022-08-12发表,共计898字。
转载说明:本文为搜栈网原创文章,除特殊说明外皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码