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,
}