深拷贝仅用于安全传递可序列化初始数据，必须嵌入沙箱生命周期中配合proxy或iframe实现隔离；不可用于函数、date等不可序列化类型，推荐structuredclone()。

深拷贝本身不创建沙箱环境，它只负责安全传递纯数据上下文，确保子应用初始状态不与主应用或其他子应用共享引用。真正实现状态独立隔离，需要把深拷贝作为“数据注入”环节，嵌入到沙箱生命周期中——即先用深拷贝准备干净数据，再交给 Proxy 或 iframe 沙箱执行。

深拷贝只用于传递可序列化的上下文变量

微前端中适合深拷贝传入沙箱的数据必须满足：普通对象、数组、字符串、数字、布尔值、null；不含函数、Date、RegExp、Map、Set、Promise、DOM 节点、window/document 等不可序列化或需运行时绑定的成员。

• 推荐使用 structuredClone()（现代浏览器原生支持，保留 Symbol、BigInt、TypedArray 等）
• 降级方案可用 JSON.parse(JSON.stringify())，但会丢失函数、undefined、循环引用、Date 等
• 避免手写递归深拷贝——易漏类型、不处理原型链、无性能保障

深拷贝必须配合沙箱机制才能生效

单独深拷贝不能防止子应用运行时污染全局。它只是沙箱“启动前”的一步：把主应用提供的配置、主题、用户信息等初始数据，以值拷贝方式注入沙箱作用域。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• Proxy 沙箱：将深拷贝后的对象挂载为沙箱 window 的只读属性（如 sandbox.window.__INITIAL_CONFIG__ = structuredClone(config)）
• iframe 沙箱：通过 iframe.contentWindow 注入脚本时，把深拷贝数据作为全局常量写入 iframe 的 script 标签内
• 禁止直接将深拷贝结果赋给 window 原始对象——这仍会污染主环境

哪些状态不该靠深拷贝隔离？

深拷贝解决不了运行时行为隔离。以下必须由沙箱机制本身承担：

• 全局变量增删改（如 window.myLib = {}）→ 需 Proxy 拦截或 iframe 独立 window
• 事件监听注册（window.addEventListener）→ 需重定向到沙箱代理或 iframe 内部 document
• 定时器、fetch、history 操作 → 需封装受限 API 并注入沙箱，而非深拷贝原始函数
• 子应用内部的响应式状态（如 Vue reactive / React useState）→ 属于子应用私有内存，天然隔离，无需深拷贝干预

典型安全注入流程（以 Proxy 沙箱为例）

主应用在加载子应用前，按如下顺序操作：

• 从主应用状态管理中提取配置对象（如 { theme: 'dark', lang: 'zh-CN' }）
• 调用 structuredClone() 得到纯净副本，确认无函数/原型污染
• 创建 Proxy 沙箱 window，并将副本挂载为只读属性（get() { return clone; }，set() { throw Error(); }）
• 子应用脚本在该 Proxy window 下执行，读取配置时拿到的是副本，修改不影响主应用

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南