vue3中的watch监听数组

在Vue 3中，`watch` API 可以用于监听数据的变化。如果你想监听数组的变化并获取变化后的值，你可以使用深度监听（deep: true）。以下是使用 `watch` 监听数组的基本步骤：

1. 定义一个响应式数组：

export default {
  data() {
    return {
      arr: [1, 2, 3]
    }
  },
}

2. 在 `watch` 中监听数组变化，并在变化发生时执行回调函数：

export default {
  setup(props, context) {
    const { arr } = context;

    // 使用 watch 方法，第一个参数是需要监听的数据，第二个参数是回调函数
    // deep: true 表示深度监听数组内的元素变化
    const watchArray = watch(arr, (newVal, oldVal) => {
      console.log('数组已更新:', newVal);
      // 在这里可以执行其他操作，如处理新的数组状态
    }, { deep: true });

    // 如果需要取消监听，可以在组件卸载时调用 watchArray()
    // 返回 watch 变量以便于解绑
    return { arr, watchArray };
  },
}

当你向 `arr` 添加、删除或修改元素时，`watchArray` 回调会触发。