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 项目仍然有效。如果遇到问题或有其他疑问，请提问：

相关问题

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

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

在 Vue 3 中，可以使用 `watch` 函数来深度监听数组中对象的变化。具体步骤如下：

1. 在组件中引入 `watch` 函数：`import { watch } from 'vue'`。

2. 在 `setup` 函数中定义需要监听的数组，例如：

import { ref } from 'vue'

export default {
  setup() {
    const arr = ref([{ name: 'Alice' }, { name: 'Bob' }])
    
    // 在这里定义 watch 函数
  }
}

3. 在 `setup` 函数中定义 `watch` 函数，使用 `deep` 选项来深度监听数组中的对象变化，例如：

watch(arr, (newVal, oldVal) => {
  console.log('数组发生了变化', newVal, oldVal)
}, { deep: true })

注意，这里的 `arr` 必须是一个响应式的数组，即使用 `ref`、`reactive` 或 `toRefs` 创建的数组。

这样，当数组中的对象发生变化时，就会触发 `watch` 函数中的回调函数，并打印出新旧值。