vue3监听数组对象

在 Vue.js 3 中，如果你想监听数组对象的变化，可以使用 `watch` API 或者更推荐的 `reactive` 和 `ref` 结合 `track` 钩子。`reactive` 可以将数据包裹成响应式对象，而 `track` 可以让你跟踪对数组深层结构的修改。

1. 使用 `watch` 监听数组变化：

import { watch } from 'vue';

data() {
  return {
    arr: [{ key: 'value' }]
  }
}

watch('arr', (newVal, oldVal) => {
  console.log('数组对象已更改:', newVal);
});

2. 使用 `ref` 和 `track`：

import { ref, onTrack } from 'vue';

const arrRef = ref([{ key: 'value' }]);
onTrack(arrRef.value, (changes) => {
  changes.forEach((change) => {
    console.log('数组对象已更改:', change);
  });
});

当数组内的对象添加、删除或更新时，上述函数会捕获到这些变化。