关于vue3.2父子组件传ref数组监听问题?-灵析社区
codbad代码demo: // 父组件 html: 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不加()=>就无法进入监听?
世界唯一的根据官方的API说明:
watch(WatcherSource, Callback, [WatchOptions])
type WatcherSource = Ref | (() => 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函数的形式，并且需对数据源进行深拷贝