深入Vue3.2父子组件间ref数组监听机制
在Vue3.2中，利用ref实现父子组件间数据传递和监听是常见场景。本文剖析一个父子组件间ref数组监听的典型问题：为何子组件watch中监听父组件ref数组需要使用箭头函数() => props.tabledata。
问题：父组件通过v-model将ref数组tabledata传递给子组件，子组件需监听tabledata变化并响应。然而，直接在watch中使用props.tabledata无法触发监听函数。
代码示例：
立即学习“前端免费学习笔记（深入）”；
父组件：
<Comp v-model:tabledata="tabledata"></Comp>
import { ref } from 'vue';
export default {
setup() {
const tabledata = ref([]);
const getcommentlist = async () => {
const res = await api(); // 模拟异步请求
tabledata.value = res.data;
};
return { tabledata, getcommentlist };
}
};
子组件：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
<script setup>
import { defineProps, watch } from 'vue';
const props = defineProps({
tabledata: {
type: Array,
default: () => [],
}
});
watch(
() => props.tabledata, // 箭头函数为何必要？
(newval) => {
console.log('tabledata changed:', newval);
},
{ deep: true }
);
</script>
核心问题在于子组件watch的第一个参数。Vue3的watch API要求第一个参数为ref<t></t>或() => T类型的函数。
props.tabledata本身是ref对象，而非简单数组，它是一个响应式对象，包含value属性持有实际数组数据。直接使用props.tabledata，watch不会监听其内部value属性的变化。
箭头函数() => props.tabledata的作用是返回props.tabledata的当前值。watch监听此函数返回值的变化，间接监听tabledata.value的变化。只有tabledata.value改变时，箭头函数返回值才改变，触发watch回调。
更简洁高效的方案：
在子组件中，可直接使用props.tabledata.value作为watch参数，并设置deep: true：
watch(
() => props.tabledata.value,
(newval) => {
console.log('tabledata changed:', newval);
},
{ deep: true }
);
或更推荐的写法，直接监听props.tabledata，watch会自动追踪ref对象的变化：
watch(
props.tabledata,
(newVal) => {
console.log('tableData changed:', newVal);
},
{ deep: true }
);
关键：deep: true选项确保watch检测数组内部元素的变化。 缺少deep: true，只有当整个tabledata.value数组被替换时，watch才会触发。
