在实际开发中，很多开发者都会遇到一个诡异的问题：父组件的 props 已经更新了，但子组件却没有重新渲染。这并不是 Vue3 的 bug，而是响应式机制、数据引用以及使用方式共同作用的结果。
本文将系统分析 Vue3 中 props 更新但子组件不刷新的常见原因，并给出对应解决方案。
问题现象
典型场景如下：
<Child :user="user" />
// 父组件
user.name = '新名字'子组件中：
<p>{{ user.name }}</p>结果：有时候页面不会更新，或者更新不符合预期。
核心原因解析
1. 响应式依赖未被正确追踪
Vue3 的响应式基于 Proxy，但依然依赖依赖收集。如果你在子组件中：
const { name } = props.user这种解构会丢失响应性，导致后续更新无法触发视图刷新。
因为你把响应式数据变成了普通变量。
2. 修改的是对象内部属性，而非引用
user.name = 'new'这种情况下：
- 对象引用没变
- Vue 可能不会触发子组件重新渲染（尤其在复杂场景或缓存优化下）
Vue依赖引用变化来更稳定地触发更新。
3. 子组件缓存了 props（断开响应链）
const localUser = ref(props.user)这样做会导致：
- localUser 与 props 不再同步
- 后续 props 更新不会反映到 localUser
这种问题常见于表单、初始化数据场景。
4. watch 使用错误
watch(props.user, () => {})问题：
- props 是只读代理
- 默认不是深度监听
正确写法：
watch(() => props.user, () => {}, { deep: true })否则会出现只触发一次的问题。
5. 缺少 key 导致组件复用
<Child :data="item" />如果在 v-for 中没有设置 key：
<Child v-for="item in list" :data="item" />Vue 会复用组件实例，导致不更新
6. 违反单向数据流（错误修改 props）
Vue3 的核心原则：props 是只读的，数据单向流动。
如果你在子组件中直接修改：
props.user.name = 'xxx'可能导致：
- 数据混乱
- 更新异常
- Vue 警告
解决方案总结（实战推荐）
方案1：保证引用变化（最推荐）
user = { ...user, name: 'new' }强制触发响应更新。
方案2：避免解构 props
错误：
const { name } = props正确：
props.name
// 或者
const name = computed(() => props.name)方案3：使用 watch 正确监听
watch(
() => props.user,
(val) => {
console.log(val)
},
{ deep: true }
)方案4：使用 key 强制刷新组件
<Child :user="user" :key="user.id" />
// 或者
<Child :key="JSON.stringify(user)" />方案5：子组件不要直接修改 props
正确做法：
emit('update:user', newUser)父组件：
<Child :user="user" @update:user="user = $event" />符合 Vue 单向数据流设计。
方案6：避免本地缓存 props（或同步处理）
如果必须缓存：
const local = ref({ ...props.user })
watch(() => props.user, val => {
local.value = val
})总结
Vue3 props 不刷新的本质，不是没更新，而是响应式链路被破坏，引用未变化或组件被复用。Vue3 只会响应被追踪到的变化，而不是你以为的变化。
在 Vue3 中，props 更新不触发子组件刷新，大多数时候不是框架问题，而是使用方式不符合响应式机制。只要遵循以下原则，基本不会踩坑：
- 不解构 props
- 不直接修改 props
- 优先改变引用
- 合理使用 key 和 watch
掌握这些，你的 Vue3 代码会稳定很多。