深拷贝适用于需编辑嵌套对象且不能影响父组件的场景，如表单编辑器；浅拷贝适用于只读扁平数据；最优解是用计算属性或事件通信避免拷贝。
关键看你要不要改数据，以及改了之后是否允许影响父组件。
需要编辑对象且不能影响源头时，必须深拷贝
比如子组件是表单编辑器，用户修改的是传进来的配置对象。如果只用浅拷贝（Object.assign({}, props.config) 或展开运算符），嵌套属性（如 config.theme.colors.primary）仍指向原对象内存地址——你一改，父组件状态就同步变了，违反单向数据流。
- 推荐用 structuredClone()（现代浏览器支持，能处理 Map/Set/Date 等）
- 兼容老环境可用 lodash.cloneDeep()
- 避免用 JSON.parse(JSON.stringify())：会丢函数、undefined、Symbol、正则、循环引用
只读展示或结构扁平，浅拷贝够用又高效
像渲染一个用户卡片，只读取 props.user.name 和 props.user.avatar，没有深层嵌套，也不改数据，那 {...props.user} 或 Object.assign({}, props.user) 完全可以。它快、轻量，且 Vue 的响应式代理本身已覆盖顶层变化。
- 注意：若父组件传的是普通对象字面量（如 :user="{name: 'Tom'}"），它本就不在响应式系统里，拷不拷贝都不触发更新
- 若父组件用 shallowRef 或 markRaw 包裹，浅拷贝后依然只有顶层响应，深层改不动也不会更新视图
更优解：别拷贝，用计算属性或事件通信
多数场景下，拷贝只是权宜之计。真正健壮的做法是：
- 用 computed 派生只读视图（如 const displayName = computed(() => props.user?.name || 'Anonymous')）
- 子组件通过 $emit 或 defineEmits 把变更意图发出去，由父组件决定如何更新状态
- 复杂表单可搭配 useForm 或 toRefs + ref 显式管理局部状态
拷贝不是目的，隔离与可控才是。选浅还是深，本质是在性能、安全和维护性之间做判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
