需要深拷贝而非浅拷贝，因为组件状态常含嵌套对象、数组等引用类型，浅拷贝仅复制顶层属性，内部引用仍共享，导致原始状态变更时快照同步变化，丧失“冻结”意义；而深拷贝可递归复制所有层级，确保快照完全独立。
JavaScript 中无法真正“冻结”组件生命周期中的状态，但可以通过深拷贝在关键节点（如 beforeUpdate 或 updated）捕获一份不可变快照，从而实现逻辑上的“状态冻结”——即后续操作不再影响该副本，避免副作用或误修改。
为什么需要深拷贝而非浅拷贝
组件状态（如 data、props 或响应式对象）常含嵌套对象、数组甚至函数引用。浅拷贝只复制顶层属性，内部引用仍共享；一旦原始状态变更，快照也随之变化，失去“冻结”意义。
- Vue 的
reactive/ref对象需递归遍历才能完整克隆 - JSON 序列化不支持函数、undefined、Symbol、Date、RegExp 等类型，会丢失信息
- 推荐使用结构稳定、可扩展的深拷贝方案（如
lodash.cloneDeep或自定义安全克隆函数）
在 Vue 生命周期中捕获冻结快照
以 Vue 3 Composition API 为例，在 onBeforeUpdate 钩子中保存当前响应式状态的深拷贝，作为对比或回滚依据：
- 使用
cloneDeep克隆整个state（或特定字段），存入ref或const变量 - 避免在
setup中直接拷贝未响应式化的初始值，应确保拷贝的是当前实际值 - 示例：注意不要对 Proxy 对象直接 JSON.stringify，而应先转为普通对象再深拷贝
处理响应式对象的兼容性问题
Vue 的 reactive 对象是 Proxy 实例，部分深拷贝工具可能无法正确识别其内部结构。安全做法是：
- 调用
toRaw()获取原始对象后再深拷贝（适用于已知无 Proxy 嵌套场景） - 对
ref使用unref()解包后再拷贝 - 若状态含
computed，需手动提取其.value，因其本身不可序列化
冻结快照的实际用途
深拷贝生成的快照不是用于 Object.freeze()，而是作为独立数据源参与业务逻辑：
- 表单编辑时保存“进入时”的状态，用于取消时还原
- 更新前比对前后差异，触发精细化更新（如仅提交变更字段）
- 错误边界中保留出错瞬间的状态，辅助调试或上报
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
