Vue3.2父子组件间ref数组监听：为什么watch监听props.tableData失效？
问题现象
在Vue3.2项目中，父组件通过props向子组件传递一个ref数组tableData，子组件中使用watch监听该props的变化，但发现监听不到数据变化。
原因分析
这是因为Vue3的响应式系统在处理props时的特殊性导致的。具体来说：
当父组件传递的是ref数组时，子组件接收到的props.tableData实际上是一个Proxy对象
直接修改数组元素（如tableData.value[0] = newItem）不会触发响应式更新
watch默认是浅层监听，对于数组内部的变更可能无法检测到
解决方案
方案1：使用深度监听
在watch中添加deep: true选项，实现深度监听。
// 子组件中
import { watch } from 'vue'
// 方式1：使用字符串形式的监听器
watch('tableData', (newVal, oldVal) => {
console.log('tableData changed:', newVal)
}, {
deep: true // 启用深度监听
})
// 方式2：使用函数形式的监听器
watch(
() => props.tableData,
(newVal, oldVal) => {
console.log('tableData changed:', newVal)
},
{ deep: true }
)方案2：使用watchEffect
watchEffect会自动追踪响应式依赖，适合处理复杂的响应式数据。
import { watchEffect } from 'vue'
watchEffect(() => {
// 这里会立即执行一次，并在tableData变化时重新执行
console.log('tableData:', props.tableData)
})方案3：正确修改数组
确保在父组件中正确修改数组，以触发响应式更新。
// 父组件中 - 错误的方式（不会触发响应式更新）
// tableData.value[0] = newItem
// 父组件中 - 正确的方式
// 方法1：使用数组变异方法
tableData.value.splice(index, 1, newItem)
// 方法2：创建新数组
tableData.value = [...tableData.value.slice(0, index), newItem, ...tableData.value.slice(index + 1)]
// 方法3：使用Vue提供的响应式工具
import { reactive } from 'vue'
tableData.value = reactive([...tableData.value])方案4：使用v-model实现双向绑定
考虑使用v-model替代props传递，简化数据流管理。
<!-- 父组件 --> <ChildComponent v-model:tableData="tableData" /> <!-- 子组件 --> <script setup> defineProps(['modelValue']) defineEmits(['update:modelValue']) </script>
完整示例
下面是一个完整的父子组件通信示例，演示如何正确监听props中的ref数组。
<!-- 父组件 ParentComponent.vue -->
<template>
<div>
<button @click="addItem">添加项目</button>
<ChildComponent :table-data="tableData" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const tableData = ref([
{ id: 1, name: '项目1' },
{ id: 2, name: '项目2' }
])
const addItem = () => {
const newId = tableData.value.length + 1
// 正确修改数组的方式
tableData.value.push({ id: newId, name: `项目${newId}` })
}
</script><!-- 子组件 ChildComponent.vue -->
<template>
<div>
<h3>表格数据</h3>
<ul>
<li v-for="item in tableData" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script setup>
import { watch } from 'vue'
const props = defineProps({
tableData: {
type: Array,
required: true
}
})
// 深度监听tableData变化
watch(
() => props.tableData,
(newVal, oldVal) => {
console.log('tableData发生变化:', newVal)
},
{ deep: true }
)
</script>总结
在Vue3.2中监听props中的ref数组时，需要注意以下几点：
使用deep: true选项启用深度监听
确保在父组件中以响应式的方式修改数组
考虑使用watchEffect作为替代方案
对于复杂场景，可以使用v-model实现更清晰的双向数据流
通过以上方法，可以有效解决watch监听props.tableData失效的问题。