vue3深度监听数组的变化

在Vue3中，如果需要对数组进行深度监听变化，可以使用`watch`、`ref`配合`deep`选项，或者使用第三方库如`vue-property-decorator`的`@Watch`装饰器以及`vue3-reactive-array-utils`等。

1. 使用`watch`和`deep`选项：

<template>
  <div>
    {{ arr }}
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const arr = ref([1, 2, 3]);

watch(arr, (newVal) => {
  console.log('数组已更新', newVal);
}, { deep: true });
</script>

这里，`{ deep: true }`会让`watch`在数组或对象的嵌套属性发生变化时触发。

2. 使用`vue-property-decorator`:

import { watch } from '@vue/composition-api';
import { WatchOptions } from 'vue-property-decorator';

export default {
  setup() {
    const arr = ref([1, 2, 3]);

    @Watch('arr', { deep: true })
    async function handleArrayChange(newVal: any[]) {
      console.log('数组已更新', newVal);
    }
    
    return {
      arr,
      handleArrayChange
    };
  }
};

3. `vue3-reactive-array-utils`:
安装并导入`reactiveArray`函数，然后对数组进行监视：

import { reactiveArray } from 'vue3-reactive-array-utils';

const arr = reactiveArray([1, 2, 3]);
// 或者 arr.$on('update', callback);

// 对于数组修改
arr.push(4); // 触发监听

// 或者直接监听数组变化
arr.$watch(() => {
  console.log('数组已更新');
});