Vue3.2父子组件间ref数组监听：为什么watch监听props.tableData无效？

Vue3.2父子组件间Ref数组监听详解及最佳实践

在Vue3.2中，使用ref进行父子组件间数据传递和监听很常见。本文分析一个父子组件间ref数组监听的常见问题，并提供最佳解决方案。

问题： 父组件通过v-model将ref数组tableData传递给子组件。子组件需要监听tableData的变化并做出响应。然而，watch监听props.tableData时，只有使用箭头函数() => props.tableData才能生效，直接使用props.tableData无效。

原因分析：

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

Vue3的watch函数第一个参数（source）接受两种类型：Ref<t></t>或() => T。Ref<t></t>是响应式ref对象，() => T是返回T类型值的函数。

子组件中，props.tableData是Ref<array></array>对象。直接使用它作为watch参数，watch监听的是ref对象本身，而非其内部值。ref对象只有在赋值时才触发变化，tableData.value内部值变化不会触发ref对象变更，导致监听失效。

易笔AI论文

专业AI论文生成，免费生成论文大纲，在线生成选题/综述/开题报告等论文模板

103

查看详情

箭头函数() => props.tableData创建了一个getter函数，每次watch执行都获取props.tableData的当前值。这样，即使tableData.value内部值变化，watch也能检测到。

最佳方案：

为提高代码清晰度和可维护性，建议在子组件中直接使用父组件传递的tableData ref对象，而非通过props访问：

// 子组件
const props = defineProps({
  tableData: {
    type: Object, // tableData 是一个 ref 对象
    default: () => ({ value: [] }),
  }
});

watch(
  () => props.tableData.value, // 监听 ref 对象的 value 属性
  (newVal) => {
    // ...处理逻辑...
  },
  { deep: true } // 监听数组内部元素变化
);

或者，父组件直接传递tableData.value：

// 父组件
<Comp :tableData="tableData.value" />

// 子组件
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  }
});

watch(
  props.tableData,
  (newVal) => {
    // ...处理逻辑...
  },
  { deep: true }
);

注意：tableData是数组，需要deep: true选项监听内部元素变化。如果是reactive创建的响应式对象，则无需deep: true。

总结： 正确理解watch函数参数类型和ref对象特性，对于父子组件间ref数组监听至关重要。选择合适的监听方法，可以提升代码的可读性和可维护性。

以上就是Vue3.2父子组件间ref数组监听：为什么watch监听props.tableData无效？的详细内容，更多请关注php中文网其它相关文章！