深拷贝不彻底本身不会直接导致白屏，但可能引发状态错乱、数据污染、组件异常重渲染或逻辑崩溃，最终表现为页面卡死、空白或内容消失。
对象深拷贝不彻底本身不会直接导致白屏，但它可能引发后续连锁反应——比如状态错乱、数据污染、组件异常重渲染或关键逻辑崩溃，最终表现为页面卡死、空白或内容消失。这类问题隐蔽性强，常被误判为“网络慢”或“接口挂了”，实则是内存里两个看似独立的对象在偷偷共享同一份引用数据。
先确认是不是真由深拷贝引发
别急着改拷贝逻辑，先做三件事：
- 打开控制台，搜索 Uncaught TypeError、Cannot read property 或 Maximum call stack 等报错，尤其关注发生在
mounted、created或watch回调里的异常 - 在疑似出问题的组件中，对关键状态对象（如用户配置、表单数据、列表项）执行
console.log(JSON.stringify(obj))和console.log(obj)对比——如果后者展开后能看到__proto__或深层嵌套对象被意外修改，大概率是浅拷贝残留 - 检查是否用了
Object.assign({}, obj)、扩展运算符{...obj}或Array.from(arr)处理含对象/数组字段的数据——这些都只做一层拷贝，无法穿透到内部引用
避开 JSON 方式深拷贝的典型陷阱
JSON.parse(JSON.stringify(obj)) 看似万能，但在真实项目中极易埋雷：
- 会丢掉函数、undefined、Symbol、Date、RegExp、Map、Set、BigInt 和循环引用——一旦组件依赖其中任一类型（比如用 Date 做时间筛选条件），解析后变成
null或{}，后续逻辑就可能跳过渲染分支 - 遇到
NaN、Infinity会被转成null；正则表达式变成空对象，导致校验失效 - 若对象含不可枚举属性（如某些 Vue 响应式代理字段），也会丢失
- 大数据量时性能骤降，主线程阻塞超 100ms 就可能触发浏览器渲染中断，表现为短暂白屏或卡顿
选对深拷贝方案，兼顾安全与可控
根据场景选择更稳妥的方式：
-
简单结构 + 无特殊类型：用 Lodash 的
_.cloneDeep，它已处理循环引用、Map/Set、Date 等常见类型，且支持自定义克隆逻辑 -
Vue2 项目中响应式数据：避免直接深拷贝
data或props对象，优先用Vue.util.deepCopy（非公开 API，慎用）或手动解构 + 新建对象，确保新对象不带响应式副作用 -
需要精确控制拷贝行为：手写递归拷贝时，务必判断
typeof value === 'object' && value !== null，并单独处理Date、Array、RegExp等类型；对循环引用用 WeakMap 缓存已拷贝对象 -
现代环境（Chrome 85+ / Edge 85+）：可尝试
structuredClone()，原生支持 Map/Set/Date/RegExp/ArrayBuffer 等，且自动处理循环引用——但注意目前不支持函数和 DOM 节点
加一层防御性校验，让问题浮出水面
在线上环境主动暴露潜在拷贝缺陷：
- 在关键数据初始化后，用
Object.is(obj.a, copy.a)或对比obj.a === copy.a检查引用是否隔离（适用于简单嵌套） - 对配置类对象，添加运行时断言：
if (original.config.theme === copy.config.theme) console.warn('深拷贝未生效：theme 引用未分离') - 在开发环境启用 Vue 的
devtools，观察组件 data 中对象的__ob__属性是否存在——若拷贝后仍有该字段，说明 Vue 把它当成了响应式对象，可能引发非预期的依赖收集和更新
