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

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《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 为什么不加 () => 就无法进入监听？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！