浅拷贝无法防范嵌套引用的数据改写，真正防护靠开发者清醒认知与主动切断引用链；需在编辑表单、多组件共享props等场景改用深拷贝或不可变更新，并养成接收即拷贝、修改前断言的习惯。
浅拷贝本身不能防范无意的数据改写，它只是复制第一层属性——而跨组件传递 Props 时的意外改写，恰恰就发生在“第二层及更深”的嵌套引用上。真正起防护作用的，是开发者对拷贝行为边界的清醒认知，以及在关键节点主动切断引用链。
先识别哪些操作看似安全、实则危险
这些写法在 Vue 或 React 子组件中很常见，但都只做浅拷贝：
-
展开运算符：
const local = { ...props.config } -
Object.assign：
const local = Object.assign({}, props.config) -
数组浅拷贝方法：
const list = props.items.slice()或[...props.items]
只要 props.config 或 props.items 中含有对象、数组、日期等引用类型，上述操作后修改 local.nestedObj.field 或 list[0].name，就会同步影响父组件原始数据。
明确什么场景必须放弃浅拷贝
以下情况浅拷贝已失效，深拷贝或不可变更新是底线：
立即学习“Java免费学习笔记（深入）”；
- 子组件需要编辑表单、筛选配置、树形结构等可变嵌套对象
- Props 来自 API 响应、
localStorage或第三方 SDK，后续逻辑可能多处修改 - 多个子组件共用同一份 props 数据（如侧边栏 + 主内容区同时读取 user.profile）
- 你无法控制父组件是否使用
reactive或ref包裹数据（Vue 场景下响应式不等于深隔离）
轻量又可靠的替代方案
不必每次都上完整深拷贝，按需选择更贴合的策略：
-
只改局部字段？用解构重建：比如只需编辑用户姓名和邮箱，就写
{ name, email, ...rest } = props.user; const draft = { name: 'new', email: 'x@y.z', ...rest }; -
数组项要更新？用 map 创建新数组：
items.value = items.value.map((item, i) => i === index ? { ...item, status: 'done' } : item) -
现代环境首选 structuredClone：支持
Date、Map、Set、循环引用，且语义准确：const safeCopy = structuredClone(props.data) -
兼容老浏览器？用 lodash.cloneDeep：比
JSON.parse(JSON.stringify())稳定得多，能保留函数、undefined、正则等（若确实需要）
养成两个低成本防御习惯
很多污染 Bug 其实发生在“以为安全”的瞬间：
-
接收即深拷贝：在
setup或constructor开头就处理外部输入，而不是等到点击编辑按钮才拷贝 -
修改前加断言：临时加一行
console.assert(props.user !== localUser, 'props 被意外复用')，快速暴露引用泄漏
