vue屬性/子屬性監聽watch的幾種方法

1. 特殊字符法

2. 特殊字符+deep法

3. 直接deep法

4. 常規法

5. 計算屬性法（這裏沒寫，有空了再補）

直接用如下代碼示例吧：

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