vue3 watch 深度监听数组中的对象

可以使用 deep 选项来深度监听数组中的对象，示例代码如下：

watch: {
  myArray: {
    handler: function(val, oldVal) {
      // do something
    },
    deep: true
  }
}

在上面的代码中，myArray 是一个数组，我们使用 deep 选项来深度监听其中的对象。当 myArray 数组中的对象发生变化时，handler 函数会被调用。

相关问题

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 来监听数组和对象的变更。

vue2 watch深度监听数组变化

在 Vue.js v2 中，`watch` 提供了一个简单的机制来监听数据的变化并执行特定的操作。如果你想要深度监听数组变化，即当数组内的元素或者其属性发生改变时也能触发回调，Vue 的 `deep` 属性可以帮助你实现这个需求。

使用方法是在 `watch` 对象的选项中设置 `deep` 参数为 `true`，示例如下：

data() {
  return {
    arr: [ { name: 'Tom' }, { name: 'Jerry' } ]
  }
}

methods: {
  handleArrayChange() {
    // 在这里处理数组变化操作
  }
}

watch: {
  arr: {
    handler(newVal, oldVal) {
      this.handleArrayChange();
    },
    deep: true // 表示深度监听
  }
}

在这个例子中，当你对数组中的任何一个元素（如 `arr[0].name` 或者新添加、删除元素）进行修改时，`handleArrayChange` 方法会被调用。注意，在 Vue v3 版本中，推荐使用 `reactive` 和 `watchEffect` 来实现更现代的数据反应机制，但上述代码对于 Vue v2 项目仍然有效。如果遇到问题或有其他疑问，请提问：