高性能深拷贝是B端低代码看板画布复制的核心，需兼顾速度、结构准确性与可还原性；须规避JSON序列化缺陷，采用structuredClone兜底、分层状态设计及定制化轻量拷贝器，并协同状态管理与渲染引擎实现无卡顿复刻。
高性能深拷贝是 B 端低代码看板实现画布复制的核心技术支撑，关键不在于“能不能拷”，而在于“拷得快、不卡顿、结构准、可还原”。尤其在组件嵌套深、数据量大（如 50+ 图表+联动逻辑）、需支持多层级撤销/克隆/导出的场景下，朴素的 JSON.parse(JSON.stringify()) 或递归拷贝极易引发阻塞、丢失函数/循环引用/原型链、破坏响应式代理等问题。
避开 JSON 序列化的三大硬伤
低代码画布中，组件配置常含：方法（如 onDrag、formatter）、Symbol 键、Map/Set、Date、RegExp、Blob、甚至 Vue/React 组件实例或响应式 proxy 对象。JSON 方式会直接丢弃这些，导致复制后图表无法刷新、事件失效、联动断连。
- 用
structuredClone()（现代浏览器）作为兜底：支持 Map/Set/Date/RegExp/Blob 等，但不支持函数和自定义类实例，且暂不兼容 IE 和部分旧版 Edge - 对含方法的配置对象，提取纯数据字段（如
props、config、events中的回调名而非函数体），运行时通过注册中心动态绑定 - 将画布状态拆分为「可序列化元数据」+「运行时上下文」两层，复制只操作前者，避免深拷不可序列化对象
按需定制的轻量级深拷贝工具函数
不依赖 Lodash 等重型库（增加包体积），而是针对低代码画布典型结构（树状组件 + 属性配置 + 样式 + 事件映射）编写专用拷贝器：
- 识别并跳过不可拷贝字段：如
__vccOpts（Vue3 编译标记）、$$proxy（响应式代理）、ref对象，改用shallowRef或重置为初始值 - 对循环引用做缓存记录（WeakMap），避免栈溢出；对大型数组/对象启用分块拷贝（requestIdleCallback 或 setTimeout 微任务切片）防主线程冻结
- 组件 ID、绑定 key、数据源 alias 等需自动重生成（如追加
-copy-123后缀），防止复制后与原组件冲突或联动错乱
画布复制的完整流程协同设计
深拷贝只是其中一环，需与状态管理、渲染引擎、事件系统协同：
- 复制前：暂停响应式依赖收集（如 Vue 的
pauseTracking()）、禁用实时校验和自动保存，减少中间开销 - 复制中：使用 Worker 线程执行纯数据深拷贝（仅传 config 对象，不传 DOM 或实例），主线程保持交互响应
- 复制后：批量重建组件实例（非逐个 mount）、重新绑定事件监听器、更新布局引擎的坐标缓存、触发一次全局 layout 计算而非多次 forceUpdate
实测优化效果参考（中型看板场景）
某制造行业设备监控看板（含 32 个 ECharts 图表、18 个表单控件、7 组联动规则）：
- 原始 JSON 拷贝：~1.8s，丢失 3 类事件回调，缩放后图表错位
- Lodash.cloneDeep：~900ms，内存峰值上涨 40%，频繁 GC 导致卡顿
- 定制分块拷贝 + Worker 协同：~320ms（主线程无卡顿），100% 结构保留，ID 自动去重，联动关系完整继承
不复杂但容易忽略：画布复制不是“复制对象”，而是“复刻可运行的视图上下文”。深拷贝是起点，不是终点。
