vue.js监听属性watch(handler方法immediate属性deep属性)

使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。 

handler方法和immediate属性

当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true

之前我们写的 watch 方法其实默认写的就是这个handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。

immediate:true代表如果在 wacth 里声明了 viewDetials之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行

deep属性

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

设置deep: true 则可以监听到newTemplateForm 的变化，此时会给newTemplateForm 的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：'newTemplateForm .cycleUpkeep'

 

newTemplateForm: { handler(val) { // 频次任务 table 是否为数组
    if (!Array.isArray(val.cycleUpkeep)) { this.newTemplateForm.cycleUpkeep = [{ dayNum: 1, timeStart: '', timeEnd: '' }] } // 次数大于table数据条目数
    if (val.cycleUpkeep.dayNum > val.cycleUpkeep.length) { console.log(1111) for (var i = this.newTemplateForm.cycleUpkeep.length + 1; i <= this.newTemplateForm.cycleUpkeep.dayNum; i++) { this.newTemplateForm.cycleUpkeep.push({ dayNum: i, timeStart: '', timeEnd: '' }) } } // 时间间隔为 undefined 时
    if (!this.newTemplateForm.cycleTypeNum) { this.newTemplateForm.cycleTypeNum = 1 } // 时间单位 可能为 0：天
    if (!this.newTemplateForm.cycleType) { if (this.newTemplateForm.cycleType === 0) { this.newTemplateForm.cycleType = 0 } else { this.newTemplateForm.cycleType = 1 } } // 次数为 undefined 时
    if (!this.newTemplateForm.cycleUpkeep.dayNum) { this.newTemplateForm.cycleUpkeep.dayNum = 1 } }, immediate: true, deep: true },

 

viewDetials: { handler(val) { console.log(val) }, immediate: true, }