vue 3 中 props 默认深度响应式，但仅当父组件传入 reactive/ref 数据；普通对象、shallowref、markraw 或静态值均不触发深层响应；浅拷贝无法隔离嵌套引用，深拷贝（structuredclone 或 lodash.clonedeep）适用于编辑场景，computed 和事件通信是更优雅的替代方案。
Vue 的 Props 本身是响应式的，但它的响应式层级取决于数据结构和传递方式——不是所有“看起来变了”的 props 都会触发更新，也不是所有“改了内部属性”的操作都安全。关键在于理解：Props 是只读代理，而响应式是否穿透到深层，取决于 Vue 是否对嵌套对象做了递归代理。
Props 的响应式到底有多深？
Vue 3 使用 Proxy 实现响应式，对传入的 props 对象默认做 深度响应式代理：只要父组件传的是 reactive/ref 包裹的数据，props 内部任意层级的属性变化（比如 user.profile.avatar）都能被子组件响应并触发视图更新。
但注意几个边界情况：
- 如果父组件传的是普通对象字面量（如
:config="{theme: 'dark'}"），它不会被自动转为响应式，也就没有响应行为 - 如果父组件用
shallowRef或markRaw包裹了数据，那 props 中对应字段就只有顶层响应，嵌套修改不会触发更新 - 静态值（如
:title="'Hello'"）根本不在响应式系统中，自然不响应
为什么浅拷贝 props 有时“好像没用”？
浅拷贝（如 {...props.obj}、Object.assign({}, props.obj)）只复制第一层属性。若 props 传入的是一个嵌套对象：
props: {
user: {
name: 'Alice',
address: { city: 'Beijing', zip: '100000' }
}
}
那么浅拷贝后得到的新对象，newUser.address 仍指向原对象的 address 内存地址。此时在子组件里写 newUser.address.city = 'Shanghai'，父组件的 user.address.city 也会变——这违背了单向数据流原则。
所以浅拷贝只适用于：数据结构扁平、无嵌套引用，或你明确只需要隔离顶层字段。
深拷贝不是万能解药，但它是编辑场景的底线
当子组件需要自由编辑传入的对象（比如表单编辑、配置调整），必须确保副本与源完全独立。推荐方案：
- 优先使用
structuredClone()（现代浏览器支持，可处理 Map/Set/Date 等，不丢函数但不支持循环引用） - 兼容性要求高时用
lodash.cloneDeep（稳定、全面，需引入依赖） - 避免用
JSON.parse(JSON.stringify(obj))：会丢失函数、undefined、RegExp、Symbol 和循环引用，且 Date 变成字符串
拷贝后若需响应式，再用 reactive() 包裹；若只是临时计算或提交前比对，保持普通对象更轻量。
更优雅的替代思路：用 computed + 事件解耦
并非所有场景都需要拷贝。如果只是展示+格式化，用 computed 更安全：
computed: {
displayName() {
return this.name?.trim().toUpperCase() || 'N/A'
}
}
如果涉及编辑但不想管理副本，可让父组件控制状态，子组件只负责通知：
- 子组件通过
$emit('update:user', editedUser)告知变更意图 - 父组件监听并决定是否更新源数据（甚至做校验、防抖、回滚）
- 配合
v-model语法糖，语义更清晰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
