vue属性/子属性监听watch的几种方法

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