Vue3组合式API+TS项目中子组件UI不更新问题求助

问题描述 #

基于Vue3 + Composition API + TypeScript搭建项目时，页面加载阶段子组件的title值无法更新：

• Vue DevTools显示子组件的title prop已变更，但UI未同步渲染
• 在父组件Home.vue中直接展示homeStore.title能正常更新
• 给子组件添加key属性后问题解决，希望了解其他替代方案

代码示例 #

Home.vue #

<template>
  <SummaryCard :title="homeStore.title" />
</template>

<script setup lang="ts">
import { useHomeStore } from '@/views/main/home/stores/homeStore.ts'
import SummaryCard from './SummaryCard.vue'

const homeStore = useHomeStore()
</script>

SummaryCard.vue #

<template>
  <div>
    {{ title }}
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps({
  title: String,
})

const { title } = props
</script>

homeStore.ts #

import { defineStore } from 'pinia'
import { ref, toRefs, onMounted } from 'vue'

export const useHomeStore = defineStore('HomeStore', () => {
  const initialState = () => ({
    title: 'NO TITLE',
  })

  const state = ref(initialState())
  const { title } = toRefs(state.value)

  onMounted(async () => {
    title.value = await getTitleApi()
  })

  const reset = () => Object.assign(state.value, initialState())

  return {
    title,
    reset,
  }
})

问题根源 #

1. 子组件props解构丢失响应性 #

Vue3的props是响应式对象，但直接通过const { title } = props解构时，会将title转为非响应式的普通值快照。当父组件传递的title更新时，这个解构出的title不会自动同步，导致UI无法更新。

2. Pinia Store中的响应性隐患 #

Store中使用toRefs(state.value)创建的ref依赖于初始的state.value对象，虽然当前业务场景下未直接引发问题，但这种写法不够严谨——如果后续通过替换state.value的方式更新状态，会导致title ref的响应性链路断裂。

替代解决方案 #

方案1：保持props的响应性（推荐） #

不要直接解构props，或者用toRefs处理props后再解构，确保拿到的是响应式ref：

<template>
  <div>
    {{ title }}
  </div>
</template>

<script setup lang="ts">
import { defineProps, toRefs } from 'vue'

const props = defineProps({
  title: String,
})

// 用toRefs解构，保留响应性
const { title } = toRefs(props)
</script>

或者直接在模板中使用props.title：

<template>
  <div>
    {{ props.title }}
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps({
  title: String,
})
</script>

方案2：优化Pinia Store的写法 #

将Store中的状态拆分为独立的ref，避免嵌套对象带来的响应性问题，写法更简洁直观：

import { defineStore } from 'pinia'
import { ref, onMounted } from 'vue'

export const useHomeStore = defineStore('HomeStore', () => {
  const title = ref('NO TITLE')

  onMounted(async () => {
    title.value = await getTitleApi()
  })

  const reset = () => {
    title.value = 'NO TITLE'
  }

  return {
    title,
    reset,
  }
})

方案3：使用computed监听props #

如果需要对props做额外处理，可以用computed创建响应式依赖：

<template>
  <div>
    {{ computedTitle }}
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue'

const props = defineProps({
  title: String,
})

const computedTitle = computed(() => props.title)
</script>

总结 #

给子组件加key本质是强制Vue重新渲染组件，虽然能解决问题但属于“绕开问题”的方案。更合理的方式是从响应性根源入手，确保props和store的状态保持响应式链路完整，以上几种方案都可以替代key的方式解决UI未同步的问题。

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