关于vue3.2父子组件传ref数组监听问题?

作者站长头像
站长
· 阅读数 17

代码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个回答
avatar
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函数的形式,并且需对数据源进行深拷贝
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容