vue3 监听数组变化

在Vue3中，可以通过使用`watch`函数来监听数组的变化。Vue3中的`watch`函数可以接收两个参数，第一个参数是要监听的数据，第二个参数是回调函数，当数据发生变化时会触发该回调函数。对于数组的监听，可以使用`watch`函数的`deep`选项来进行深度监听，以便捕捉到数组的变化。例如：

let arr = ref(\[\]); // 定义一个响应式的数组

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

在上述代码中，我们使用`ref`函数将数组转换为响应式数据，然后使用`watch`函数监听该数组的变化。当数组发生变化时，回调函数会被触发，并打印出数组的新值。通过设置`deep`选项为`true`，可以实现对数组的深度监听。这样，无论是通过赋值、splice方法还是push方法改变数组，都能够被监听到。

需要注意的是，在Vue3中，监听数组的变化需要使用`ref`函数将数组转换为响应式数据，而不是直接使用普通的数组。这样才能确保数组的变化能够被Vue3监听到。
#### 引用[.reference_title]
- *1* [Vue3为何使用Proxy实现数据监听](https://blog.csdn.net/Gary_888/article/details/125860568)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue3监听变量（包括对象、数组的特殊用法）](https://blog.csdn.net/qq_39157025/article/details/131048908)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]