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

本篇文章向大家介绍《Vue3.2 父子组件传ref数组监听失效的原因和解决方法是什么？》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

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数组监听失效的原因和解决方法是什么？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注米云公众号！

近期文章