vue3监听数组方法
解决方案
在Vue3中监听数组的变化可以通过使用watch和computed属性来实现。对于数组的监听，直接监听整个数组是比较常见的方式；如果要对数组内部元素变化进行监听，则需要一些特殊的处理。
1. 使用 watch 监听整个数组
这是最基础也是最常用的方法。我们只需要将数组作为监听的目标，当数组被替换为新数组时就会触发相应的操作。
```javascript
import { ref, watch } from 'vue'
// 定义一个数组
const myArray = ref([1, 2, 3])
// 监听myArray
watch(myArray, (newVal, oldVal) => {
console.log('数组发生了变化')
console.log('新的值:', newVal)
console.log('旧的值:', oldVal)
}, { deep: false }) // 此处设置为false表示只监听数组本身的改变，比如被替换为新数组
// 示例：改变数组（这会触发监听）
setTimeout(() => {
myArray.value = [4, 5, 6]
}, 2000)
</p>
<h2><h2>2. 深度监听数组内部变化</h2></h2>
<p>有时候我们需要监听数组内部元素的变化，例如某个元素被修改、添加或删除。这就需要用到深度监听。
```javascript</p>
import { ref, watch } from 'vue'
// 定义一个数组
const myArray = ref([1, 2, 3])
// 深度监听myArray
watch(myArray, (newVal, oldVal) => {
console.log('数组内部元素发生了变化')
console.log('新的值:', newVal)
console.log('旧的值:', oldVal)
}, { deep: true }) // 设置为true表示监听数组内部的改变
// 示例：改变数组中的某个元素（这会触发监听）
setTimeout(() => {
myArray.value[0] = 7
}, 2000)
<p>
3. 使用 computed 属性配合 watch 实现更灵活的监听
如果我们想基于数组做一些计算然后再监听这些计算结果，可以结合computed属性与watch来实现。
```javascript
import { ref, watch, computed } from 'vue'
// 定义一个数组
const myArray = ref([1, 2, 3])
// 计算属性 - 数组元素之和
const sum = computed(() => {
return myArray.value.reduce((a, b) => a + b, 0)
})
// 监听sum的变化
watch(sum, (newVal, oldVal) => {
console.log('数组元素之和发生变化')
console.log('新的和:', newVal)
console.log('旧的和:', oldVal)
})
// 示例：改变数组中的某个元素（这会触发sum的变化并触发监听）
setTimeout(() => {
myArray.value.push(4)
}, 2000)
```
以上就是在Vue3中监听数组的不同方法，根据实际需求可以选择合适的方式来监听数组及其内部元素的变化。
