关于vue3.2父子组件传ref数组监听问题?
代码demo:
// 父组件
html:
<comp v-model:tableData="tableData"></comp>
js:
let tableData = ref([]);
// 获取评论列表
async function getCommentList() {
let res = await api();
tableData.value = res.data
}
// 子组件
js:
const props = defineProps({
tableData: {
type: Array,
default: () => [],
}
});
watch(
()=>props.tableData,// 为什么这里不加()=>就无法进入监听?
(newVal) => {...},
{ deep: true }
);
请教一下子组件的watch不加()=>就无法进入监听?
回复
1个回答

test
2024-06-20
根据官方的API说明:
watch(WatcherSource, Callback, [WatchOptions])
type WatcherSource<T> = Ref<T> | (() => T)
interface WatchOptions extends WatchEffectOptions {
deep?: boolean // 默认:false
immediate?: boolean // 默认:false
flush?: string // 默认:'pre'
}
因此你应该:
watch(
tableData,
(newVal) => {...},
{ deep: true }
);
最后提醒一下:
当我们使用watch侦听引用对象时
若使用ref定义的引用对象:
- 只要获取当前值,watch第一个参数直接写成数据源,另外需要加上deep:true选项
- 若要获取当前值和先前值,需要把数据源写成getter函数的形式,并且需对数据源进行深拷贝
若使用reactive定义的引用对象:
- 只要获取当前值,watch第一个参数直接写成数据源,可以不加deep:true选项
- 若要获取当前值和先前值,需要把数据源写成getter函数的形式,并且需对数据源进行深拷贝
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容