Vue3.2 父子组件传ref数组监听失效的原因和解决方法是什么？

vue3.2父子组件传ref数组监听问题解答

在父子组件传ref数组并监听时，如果在子组件的watch中不加上箭头函数包裹，则监听不会生效。这主要是因为：

官方api说明

根据官方api说明，watch函数的第一个参数可以是ref或getter函数：

watch(watchersource, callback, [watchoptions])

type watchersource<t> = ref<t> | (() => t) 

正确用法

因此，在子组件的watch中，应将tabledata数据源写成getter函数的形式，并需要加上deep: true选项：

watch(
  tableData,
  (newVal) => {...},
  { deep: true }
);

补充说明

当我们使用watch侦听引用对象时，需要特别注意：

• ref定义的引用对象：

  • 获取当前值：watch第一个参数直接写成数据源，需加deep: true选项
  • 获取当前值和先前值：watch第一个参数写成getter函数，对数据源深拷贝

• reactive定义的引用对象：

  • 获取当前值：watch第一个参数直接写成数据源，可不用deep: true选项
  • 获取当前值和先前值：watch第一个参数写成getter函数，对数据源深拷贝

以上就是Vue3.2 父子组件传ref数组监听失效的原因和解决方法是什么？的详细内容，更多请关注硕下网其它相关文章！