浅拷贝性能为常数级，深拷贝随数据规模呈线性或指数增长；万级列表等场景需按需、最小粒度、正确时机拷贝，避免在渲染链路中执行，应结合框架机制（如React.memo、Vue v-memo）与不可变更新策略优化。

浅拷贝和深拷贝的性能损耗差异显著——浅拷贝是常数级开销，深拷贝随数据深度和规模呈线性甚至指数增长。在大规模渲染场景（如万级列表、嵌套配置面板、实时仪表盘）中，盲目拷贝会直接拖慢首屏、卡顿交互、触发频繁重绘。优化核心不是“少拷贝”，而是“只在必要时、以最小粒度、在正确时机”拷贝。

哪些字段必须用浅拷贝

一级结构中大量基本类型或不可变引用，完全可复用原始内存地址：

• 字符串文案、数字 ID、布尔开关、时间戳等纯值字段，直接展开或 Object.assign 即可
• 函数、正则、Symbol、静态配置对象（如 { apiHost: 'https://x' }），浅拷贝后仍指向同一内存，无需复制
• 数组容器本身需隔离（如 [...arr]），但内部若全是基本类型或已冻结对象，不需深处理

哪些嵌套路径才值得深拷贝

深拷贝只应落在真正被编辑、且必须与源隔离的子路径上，而非整个数据树：

• 表单编辑中修改 user.profile.address.city → 只深拷贝 user.profile.address 这一层
• 规则配置中更新 config.rules[2].threshold → 深拷贝 config.rules[2] 对象，而非整个 config
• 优先用 structuredClone（现代浏览器支持）或 Immer produce，避免 JSON.parse(JSON.stringify()) 丢函数、Date、undefined

拷贝行为必须避开渲染链路

React/Vue 的 diff 和 memo 机制依赖引用稳定性，错误时机的拷贝会破坏优化：

• 不在 render 或组件函数体内做任何拷贝——这会让 React.memo 失效，子组件每次接收新引用必重渲染
• 把拷贝逻辑移到事件处理器（如 onInputChange）、useReducer 的 case 分支、或 useEffect 的副作用中
• 用 useMemo 缓存已拷贝结果：对同一输入反复计算时，避免重复执行深拷贝
• 需要比对变化时，用 react-fast-compare 做深层值比较，而不是靠制造新引用“绕过”浅比较

配合框架机制才能见效

单独写对拷贝没用，必须和框架的更新策略对齐：

• React 中搭配 React.memo + props 引用稳定；Vue 中搭配 v-memo="[item.id]" 或 computed 依赖最小化
• 状态更新统一走不可变逻辑：reducer 返回新对象，setup 中用 toRefs + proxy 而非直接赋值
• 对超大数组（如 10k 条日志），考虑虚拟滚动 + 按需 shallow copy 当前页数据，其余保持原始引用