vue 中 watch 数据监听

immediate(立即执行监听)

        true：无论值是否发生改变，时刻都会监听

        false：常规用法，只有值发生改变才会监听

deep(深度监听)

        true：监听到对象属性内部的改变

        false：监听不到对象属性内部的改变

监听某一个值

方法1：this.$watch

data() {
  return {
    curNav: 0,
    obj: { valOne: 1, valTwo: 1 }
  }
},
mounted() {
  this.$watch('curNav', (newVal, oldVal) => {
    console.log('newVal=' + newVal + '; oldVal=' + oldVal)
  })
  this.$watch(() => this.obj.valOne, (newVal, oldVal) => {
    console.log('newVal=' + newVal + '; oldVal=' + oldVal)
  })
  this.$watch('obj.valOne', (newVal, oldVal) => {
    console.log('newVal=' + newVal + '; oldVal=' + oldVal)
  })
  this.$watch('curNav', (newVal, oldVal) => {
    console.log('newVal=' + newVal + '; oldVal=' + oldVal)
  }, {
    immediate: true // 立即执行监听
  })
},

方法2：watch

data() {
  return {
    curNav: 0,
    obj: { valOne: 1, valTwo: 1 }
  }
},
watch: {
  curNav(newVal, oldVal) {
    console.log('newVal=' + newVal + '; oldVal=' + oldVal)
  },
  'obj.valOne'(newVal, oldVal) {
    console.log('newVal=' + newVal + '; oldVal=' + oldVal)
  },
  'obj.valTwo': {
    handler(newVal, oldVal) {
      console.log('newVal=' + newVal + '; oldVal=' + oldVal)
    },
    immediate: true // 立即执行监听
  }
},

监听对象(深度监听)

方法1：this.$watch

data() {
  return {
    curNav: 0,
    obj: { valOne: 1, valTwo: 1 }
  }
},
mounted() {
  /* 监听对象(深度监听) */
  this.$watch('obj', (newVal, oldVal) => {
    console.log('newVal=', newVal, 'oldVal=', oldVal)
  }, {
    deep: true // 深度监听(例如对象中的数据)
  })
},

 方法2：watch

data() {
  return {
    curNav: 0,
    obj: { valOne: 1, valTwo: 1 }
  }
},
watch: {
  obj: {
    handler(newVal, oldVal) {
      console.log('newVal=', newVal, 'oldVal=', oldVal)
    },
    deep: true // 深度监听(例如对象中的数据)
  }
},

 扩展(监听数组)

 (一维、多维)数组的变化不需要深度监听

data() {
  return {
    arr1: [1, 2, 3],
    arr2: [1, 2, 3, [4, 5]]
  }
},
watch: {
  arr1(newVal, oldVal) {
    console.log('newVal1=', newVal, 'oldVal1=', oldVal)
  },
  arr2(newVal, oldVal) {
    console.log('newVal2=', newVal, 'oldVal2=', oldVal)
  }
},

数组对象中对象属性变化监测需要使用 deep: true 深度监听(多少层内产生变化都可以监测到)

data() {
  return {
    arr1: [{ id: 1, sex: 11 }],
    arr2: [{ id: 2, sex: 22, list: [{ id: 3, sex: 33 }] }]
  }
},
watch: {
  arr1: {
    handler(newVal, oldVal) {
      console.log('newVal1=', newVal, 'oldVal1=', oldVal)
    },
    deep: true // 深度监听(例如对象中的数据)
  },
  arr2: {
    handler(newVal, oldVal) {
      console.log('newVal1=', newVal, 'oldVal1=', oldVal)
    },
    deep: true // 深度监听(例如对象中的数据)
  }
},