标签：pre ops 效果 编译 逻辑 无法 immediate 条目 组件
使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true
之前我们写的 watch 方法其实默认写的就是这个handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。
immediate:true代表如果在 wacth 里声明了 viewDetials之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行
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,
}
vue.js监听属性watch(handler方法immediate属性deep属性)
标签：pre ops 效果 编译 逻辑 无法 immediate 条目 组件
原文地址：https://www.cnblogs.com/yyh28/p/13222798.html
