关于vue.js 3.2 父子组件传ref 数组监听 在vue.js 中,我们可以通过watch 选项来监听响应式数据的变化,从而在变化后进行相应的处理。在父子组件的通信中,如果父组件向子组件传递 ref 数组,那么子组件需要使用 watch 监听数组的变化。 问题:子组件 watch 不加 () => 就无法进入监听? 根据官方文档,watch"> 跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

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

就无法进入监听?" /> 关于vue.js 3.2 父子组件传ref 数组监听 在vue.js 中,我们可以通过watch 选项来监听响应式数据的变化,从而在变化后进行相应的处理。在父子组件的通信中,如果父组件向子组件传递 ref 数组,那么子组件需要使用 watch 监听数组的变化。 问题:子组件 watch 不加 () => 就无法进入监听? 根据官方文档,watch 函数的第一个参数应该为数据源(watchersource),可以是 ref 对象或一个返回 ref 对象的 getter 函数。在你的代码中,你使用的ref 数组是 tabledata ,因此应该直接写成: 立即学习 “ 前端免费学习笔记(深入) ”; Vue-router参考手册 Vue-router参考手册下载 下载
watch(tabledata, (newval) => {...}, { deep: true });
而不应该加上箭头函数:
watch(() => props.tableData, (newVal) => {...}, { deep: true });
提醒:当监听引用对象时 ref 对象: 只要获取当前值,第一个参数直接写成数据源,并加上deep: true 选项。 若要获取当前值和先前值,需要将数据源写成 getter 函数的形式,并对数据源进行深拷贝。 reactive 对象: 只要获取当前值,第一个参数直接写成数据源,可以不加deep: true 选项。 若要获取当前值和先前值,需要将数据源写成 getter 函数的形式,并对数据源进行深拷贝。

相关文章