vue3中使用watch监听数组

在 Vue 3 中，使用 `watch` 监听数组需要使用新的 API，即 `watchEffect`。 `watchEffect` 可以监听计算属性，响应式对象和数组等。

下面是一个监听数组变化的示例：

import { watchEffect, ref } from 'vue'

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

watchEffect(() => {
  console.log(arr.value)
})

// 修改数组
arr.value.push(4)

在上面的代码中，我们使用 `ref` 创建一个响应式数组 `arr`。然后使用 `watchEffect` 监听 `arr` 的变化，当数组发生变化时，会自动触发回调函数。

需要注意的是，在 `watchEffect` 中访问数组时，需要使用 `arr.value` 来访问数组的真实值，否则不会触发更新。

另外，如果需要深度监听数组变化，可以使用 `watch` API，并将 `deep` 参数设置为 `true`。例如：

import { watch, ref } from 'vue'

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

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

// 修改数组
arr.value.push(4)