Vue3子组件props变更后UI未更新的问题求助

我希望子组件在props发生变更时自动更新UI，但目前无法实现：

父组件 App.vue #

<template>
  <div id="app">
    <Foo :foo="foo" />
  </div>
</template>

<script setup>
import Foo from '@/components/Foo.vue'

const foo = { a: 1, b: 2 }

// 每0.5秒更新传入的对象属性值
setInterval(() => {
  foo.a += 1
  foo.b += 1
}, 500)
</script>

子组件 Foo.vue #

<template>
  <div>
    <div>Value A: {{ foo.a }}</div>
    <div>Value B: {{ foo.b }}</div>
  </div>
</template>

<script setup>
const props = defineProps({ foo: { a: 0, b: 0 } })
</script>

在Foo.vue中加入console.log可以看到值在变化，但UI上无法显示这些变更。

我的猜想 #

不确定是否应该将const foo = { a: 1, b: 2 }替换为const foo = reactive({ a: 1, b: 2 })？尝试后似乎有效，但我想知道这是否是最佳实践？因为在旧版Vue中不需要这样做。另外，能否在Foo.vue侧确保变更被追踪，而无需检查该组件的所有使用场景？

解答 #

1. 问题根源 #

Vue 3的响应式系统基于Proxy实现，只有被显式转为响应式对象的属性变更，才会被Vue追踪并触发视图更新。你当前的foo是普通对象，修改它的属性不会触发响应式更新，所以父组件的变更无法同步到子组件的UI上。

2. 使用reactive是否是最佳实践？ #

是，这是Vue 3中的标准做法。

• 旧版Vue（Vue 2）使用Object.defineProperty劫持对象属性，会递归遍历已有属性做响应式处理，所以普通对象的属性变更也能被追踪，但这种方式存在局限性（比如无法追踪新增属性、数组索引变更等）。
• Vue 3改用Proxy后，必须显式通过reactive（针对对象/数组）或ref（针对基本类型）将数据转为响应式，这是更高效、更灵活的设计，也是官方推荐的最佳实践。

3. 能否在子组件侧处理？ #

可以实现，但不推荐，因为这违背了Vue的单向数据流原则，也可能带来性能问题。如果非要在子组件处理，有两种方式：

• 方式一：将props转为响应式对象
  在子组件中把传入的props转为响应式，但这样会创建新的响应式对象，和父组件的原对象脱离，后续父组件的变更无法同步过来，除非父组件每次传递新的对象引用：

  <script setup>
  import { reactive } from 'vue'
  const props = defineProps({ foo: { type: Object, default: () => ({ a: 0, b: 0 }) } })
  const reactiveFoo = reactive(props.foo)
  </script>
  

• 方式二：深度监听props
  使用watch深度监听props的变化，手动触发更新，但深度监听会带来额外性能开销：

  <script setup>
  import { watch } from 'vue'
  const props = defineProps({ foo: { type: Object, default: () => ({ a: 0, b: 0 }) } })
  
  watch(() => props.foo, (newVal) => {
    // 可在此处处理变更，或强制组件更新
    console.log(newVal)
  }, { deep: true })
  </script>
  

总结 #

最合理的方案还是在父组件中用reactive包裹状态，确保属性变更能被Vue追踪，从而自动触发子组件的UI更新，这符合Vue 3的响应式设计规范和单向数据流原则。

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