浅拷贝通过只复制顶层引用、保留嵌套结构原地址实现可控隔离，适用于扁平数据、仅改顶层字段及性能敏感场景；常见写法如{...obj}、[...arr]，但嵌套修改仍联动；需初始化时拷贝并配合不可变更新。
浅拷贝本身不“切断”联动，而是通过**只复制顶层引用、保留嵌套结构原地址**的特性，在特定场景下实现局部变量与外部数据的**可控隔离**。关键不在“切断”，而在“不主动传播修改”——只要你不碰嵌套对象内部，外层变动就不会波及原始数据。
什么时候用浅拷贝能快速隔离？
适合以下三类情况：
-
数据结构扁平：对象或数组只有一层，所有值都是基本类型（如
{ id: 1, name: 'Alice', active: true }） -
仅需保护顶层字段：你只打算改
localConfig.theme或localList.length这类顶层属性，不碰localConfig.api.baseURL这种嵌套路径 -
性能敏感且确认安全：比如每秒更新数百个配置项的表格行，用
[...rows]比structuredClone(rows)快数倍，且已约定嵌套对象不可变
常用浅拷贝写法及适用边界
这些方法都只影响第一层，务必看清你的数据是否真的一层到底：
-
对象：
{ ...props.config }或Object.assign({}, props.config)—— 若config里有{ user: { name: 'Bob' } }，copy.user.name = 'Tom'仍会改原始值 -
数组：
[...props.items]或props.items.slice()—— 若items是[{ id: 1 }, { id: 2 }]，改copy[0].id仍同步 -
Vue / React 局部响应式：
const localData = ref({ ...props.data })—— 响应式包装的是新对象，但内部嵌套仍共用引用
如何避免“以为断开了，其实没断”？
常见误判点：
- 把
ref(props.obj)当成拷贝——这根本没拷贝，还是同一引用 - 用
computed(() => ({ ...props.obj }))——每次取值都新建对象，但若在模板里多次调用，会重复创建，且无法保存中间状态 - 在事件回调里才浅拷贝（如
onUpdate(() => ({ ...data }))）——此时用户可能已改过嵌套字段，传出去的仍是脏数据
正确做法：在组件初始化或watch首次触发时，就用浅拷贝生成本地副本，后续所有读写都基于它，且明确约定“不直接修改嵌套对象属性”。
配合不可变更新更稳妥
当必须处理嵌套字段又不想深拷贝时，用“替换而非修改”：
- 改一个对象字段：
localUser = { ...localUser, name: 'New Name' } - 改数组某一项：
list = list.map((item, i) => i === index ? { ...item, status: 'done' } : item) - Vue 3 script setup 中：
const updateField = (key, value) => localData.value = { ...localData.value, [key]: value }
这种方式不依赖深浅拷贝判断，靠结构化赋值天然切断目标字段的引用链，清晰、可预测、无副作用。
