vue中watch监听对象需注意

vue中watch监听对象

data () {
    return {
      authStepPersonalData: {
        userName: '', // 姓名
        certNo: '', // 身份证号码
        address: '', // 联系地址
        vocation: '', // 职业
        mobileNumber: '', // 联系方式
        auctualCtrlName: '', // 实际控制人
        auctualBenefitName: '', // 实际受益人
      },
      modificationWatck: '0' // 是否修改 0未修改，1已修复
    }
  },

 watch: {
    authStepPersonalData: {
      handler (newValue, oldValue) {
        if (oldValue.certNo) {
          this.modificationWatck = '1'
        }
      },
      deep: true,
      immediate: false
    }
  },

handler：其值是一个回调函数。即监听到变化时应该执行的函数。

deep：其值是 true 或 false ；确认是否深入监听。deep设为了true，这样的话，如果修改了这个authStepPersonalData中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的。

immediate：其值是 true 或 false；immediate : true 代表如果在 watch 里声明了之后，就会立即先去执行里面的 handler 方法，如果为 false 不会在绑定的时候就执行。

注意handler的写法，关乎this指向问题：

watch: {
    authStepPersonalData: {
      // handler： function(newValue, oldValue) { // this.modificationWatck报错
      handler： (newValue, oldValue) => { // 不知道为什么箭头函数this.modificationWatck也报错。
        if (oldValue.certNo) {
          this.modificationWatck = '1'
        }
      },
      deep: true,
      immediate: false
    }
  },