Vue3.2父子组件间Ref数组监听详解及最佳实践
在Vue3.2中，使用ref进行父子组件间数据传递和监听很常见。本文分析一个父子组件间ref数组监听的常见问题，并提供最佳解决方案。
问题： 父组件通过v-model将ref数组tableData传递给子组件。子组件需要监听tableData的变化并做出响应。然而，watch监听props.tableData时，只有使用箭头函数() => props.tableData才能生效，直接使用props.tableData无效。
原因分析：
立即学习“前端免费学习笔记（深入）”；
Vue3的watch函数第一个参数（source）接受两种类型：Ref<t></t>或() => T。Ref<t></t>是响应式ref对象，() => T是返回T类型值的函数。
子组件中，props.tableData是Ref<array></array>对象。直接使用它作为watch参数，watch监听的是ref对象本身，而非其内部值。ref对象只有在赋值时才触发变化，tableData.value内部值变化不会触发ref对象变更，导致监听失效。
箭头函数() => props.tableData创建了一个getter函数，每次watch执行都获取props.tableData的当前值。这样，即使tableData.value内部值变化，watch也能检测到。
最佳方案：
为提高代码清晰度和可维护性，建议在子组件中直接使用父组件传递的tableData ref对象，而非通过props访问：
// 子组件
const props = defineProps({
tableData: {
type: Object, // tableData 是一个 ref 对象
default: () => ({ value: [] }),
}
});
watch(
() => props.tableData.value, // 监听 ref 对象的 value 属性
(newVal) => {
// ...处理逻辑...
},
{ deep: true } // 监听数组内部元素变化
);
或者，父组件直接传递tableData.value：
// 父组件
<Comp :tableData="tableData.value" />
// 子组件
const props = defineProps({
tableData: {
type: Array,
default: () => [],
}
});
watch(
props.tableData,
(newVal) => {
// ...处理逻辑...
},
{ deep: true }
);
注意：tableData是数组，需要deep: true选项监听内部元素变化。如果是reactive创建的响应式对象，则无需deep: true。
总结： 正确理解watch函数参数类型和ref对象特性，对于父子组件间ref数组监听至关重要。选择合适的监听方法，可以提升代码的可读性和可维护性。
