Vue.js 监听对象和数组属性变化的技巧

Vue 提供了 watch 选项，可以用来监听对象或者数组某个属性的变化。

对于对象，可以使用 $watch 方法来监听属性的变化：

data() {
  return {
    obj: {
      prop: 'value'
    }
  }
},
created() {
  this.$watch('obj.prop', (newValue, oldValue) => {
    // 当obj.prop发生变化时会执行这里的回调函数
    console.log('obj.prop变为：', newValue)
  })
}

对于数组，可以使用 watch 选项来监听数组某个索引的变化：

data() {
  return {
    arr: ['value1', 'value2']
  }
},
watch: {
  'arr[0]': {
    handler(newValue, oldValue) {
      // 当arr[0]发生变化时会执行这里的回调函数
      console.log('arr[0]变为：', newValue)
    },
    deep: true  // 深度监听，也可以不设置
  }
}

需要注意的是，Vue 的响应式系统只能监听已经创建的属性，所以如果需要监听动态添加的属性或者数组元素，需要使用 Vue.set 方法来触发属性的响应式更新。

this.$set(this.obj, 'newProp', 'value');
this.$set(this.arr, 2, 'value3');