Vue3中Computed未更新子组件属性问题求助

核心问题定位 #

你碰到的问题是响应式数据追踪失效：Vue DevTools显示子组件user有值，说明props传递链路没问题，但点击按钮输出空对象，大概率是子组件内用非响应式变量缓存了props，或者父组件computed的依赖未正确注册。

具体修复方案 #

1. 修正父组件computed逻辑 #

确保computed基于useQuery的响应式状态（isSuccess/data）做判断，避免依赖丢失：

<script setup>
import { computed } from 'vue'
import { useQuery } from '@tanstack/vue-query'

const { data: userData, isSuccess } = useQuery({
  queryKey: ['user'],
  queryFn: () => fetch('/api/user').then(res => res.json())
})

// 基于响应式的isSuccess判断，确保更新能触发computed重新计算
const user = computed(() => isSuccess.value ? userData.value : {})
</script>

<template>
  <ChildComponent :user="user" />
</template>

不要直接判断userData是否存在，初始userData为undefined时，可能导致computed无法正确追踪后续更新。

2. 子组件避免非响应式缓存props #

如果子组件把props赋值给普通变量，会丢失响应式，导致点击时输出初始值：

// ❌ 错误写法
<script setup>
const props = defineProps(['user'])
let localUser = props.user // 普通变量，不随props更新

const SaveEdit = () => {
  console.log(localUser) // 始终是空对象
}
</script>

改成直接使用props，或用computed包裹：

// ✅ 正确写法
<script setup>
const props = defineProps(['user'])

const SaveEdit = () => {
  console.log(props.user) // 直接用响应式props
}
</script>

// 若需二次处理，用computed保持响应式
<script setup>
import { computed } from 'vue'
const props = defineProps(['user'])
const localUser = computed(() => props.user)

const SaveEdit = () => {
  console.log(localUser.value)
}
</script>

3. 验证useQuery的响应式返回值 #

确认使用的@tanstack/vue-query版本正确，返回的data、isSuccess都是Vue响应式ref对象。如果是自定义封装的useQuery，要保证返回值通过ref/reactive包装。

额外排查点 #

• 检查父组件useQuery的enabled选项是否误设为false，导致请求未触发
• 确认子组件SaveEdit方法的上下文正确（比如template中直接调用，未绑定错误的this）

内容的提问来源于stack exchange，提问作者Julian Mendez