Vue.js 3.2 父子组件传 ref 数组监听：子组件 watch 为什么不加 () => 就无法进入监听？-js教程-PHP中文网

Vue.js 3.2 父子组件传 ref 数组监听：子组件 watch 为什么不加 () => 就无法进入监听？

心靈之曲

发布： 2024-11-11 08:30:02

原创

1114人浏览过

vue.js 3.2 父子组件传 ref 数组监听：子组件 watch 为什么不加 () => 就无法进入监听？就无法进入监听？" />

关于vue.js 3.2 父子组件传ref 数组监听

在vue.js 中，我们可以通过watch 选项来监听响应式数据的变化，从而在变化后进行相应的处理。在父子组件的通信中，如果父组件向子组件传递 ref 数组，那么子组件需要使用 watch 监听数组的变化。

问题：子组件 watch 不加 () => 就无法进入监听？

根据官方文档，watch 函数的第一个参数应该为数据源（watchersource），可以是 ref 对象或一个返回 ref 对象的 getter 函数。在你的代码中，你使用的ref 数组是tabledata，因此应该直接写成：

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

watch(tabledata, (newval) => {...}, { deep: true });

登录后复制

而不应该加上箭头函数：

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

登录后复制

提醒：当监听引用对象时

ref 对象：
- 只要获取当前值，第一个参数直接写成数据源，并加上deep: true 选项。
- 若要获取当前值和先前值，需要将数据源写成 getter 函数的形式，并对数据源进行深拷贝。
reactive 对象：
- 只要获取当前值，第一个参数直接写成数据源，可以不加deep: true 选项。
- 若要获取当前值和先前值，需要将数据源写成 getter 函数的形式，并对数据源进行深拷贝。

以上就是Vue.js 3.2 父子组件传 ref 数组监听：子组件 watch 为什么不加 () => 就无法进入监听？的详细内容，更多请关注php中文网其它相关文章！