vue2watch深度监听数组

Vue 2.x 中的 `watch` 只能监视响应式数据的变化，对于深度监听数组，特别是对象内部属性或嵌套数组的变化，需要借助于第三方插件如 `vue-watch-component` 或者手动处理。

Vue本身提供的 `watch` 对象只支持浅层监听，也就是说它只会检测到直接修改的数据变化。如果想对数组元素、对象的深层属性做实时监听，可以采用以下几种方法：

1. 使用 `deep` 参数：从 Vue 2.5.0 开始，`watch` 支持了 `deep` 参数，当设为 `true` 时，会对整个路径的值进行深度监听。示例：

this.$watch('myArray', (newVal, oldVal) => {
  console.log(newVal, 'has changed');
}, { deep: true });

2. 使用 `v-on` 和 `$set`：结合 `$emit` 和 Vue 的 `$set` 方法来实现数组元素的深度监听。这虽然不是 watch，但可以在数据变动时触发回调函数。

data() {
  return {
    myArray: []
  };
},
methods: {
  addItem(obj) {
    this.myArray.push(Object.assign({}, obj)); // 使用 $set 会自动触发更新
  }
}
// 触发时监听
<template>
  <button @click="addItem({ prop: 'value' })">Add Item</button>
</template>

3. 第三方插件：如上述提到的 `vue-watch-component`，提供了一个简单的 API 来监听数组和对象的变更。