vue3.2 父子组件传 ref 数组监听问题：为什么不加箭头函数无法监听？

问题：

在 vue3.2 中，父组件向子组件传递 ref 数组，但在子组件中使用 watch 监听 ref 数组时，如果不使用箭头函数，将无法进入监听过程。请解释原因。

解答：

立即学习“前端免费学习笔记（深入）”；

根据 vue3.2 官方 api，watch 监听器的第一个参数应为一个 ref 或一个 getter 函数，而数组不是一个有效的 ref 类型。

vue3-ant-design-vue-component-skill

封装基于 Vue 3 + Ant Design Vue 的通用业务组件，提供标准化模板与最佳实践。

下载

watch(watchersource<t>, callback, [watchoptions])

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

解决方法：

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

注意事项：

在使用 watch 监听引用对象时需要注意：

• ref 对象：

  • 仅获取当前值：watch 的第一个参数直接为数据源，并且需要设置 deep: true 选项。
  • 获取当前值和先前值：watch 的第一个参数需要是一个 getter 函数，并且需要对数据源进行深拷贝。

• reactive 对象：

  • 仅获取当前值：watch 的第一个参数直接为数据源，可以不添加 deep: true 选项。
  • 获取当前值和先前值：watch 的第一个参数需要是一个 getter 函数，并且需要对数据源进行深拷贝。