Vue响应式转普通对象核心是按需剥离代理层：toRaw获取原始引用（reactive解包、ref返回value），unref安全读取混合类型值，深拷贝用structuredClone，避免模板调用、重复.value及误当响应式使用。
Vue 响应式数据转普通对象，核心不是“消灭响应式”，而是按需剥离代理层、避免副作用、适配外部环境。关键看你要做什么：是临时取值、序列化导出、传给第三方库，还是彻底脱离响应式系统。
用 toRaw 获取原始引用（最常用）
toRaw 是 Vue 官方提供的脱敏工具，适用于 reactive 和 ref 包裹的数据，返回其最原始的值（不是副本，是同一内存地址）：
- 对 reactive 对象：返回解包后的普通对象，修改它会同步影响原响应式对象，但不触发视图更新
- 对 ref 对象：直接返回 .value 的原始值（比如数字、字符串、普通对象），不是 { value: ... } —— 别再链式调用 .value
- 注意它只解最外层：若 reactive 对象里嵌套了另一个 reactive，子对象仍是 Proxy，需手动递归或配合 structuredClone
用 unref 安全读取值（适合混合类型）
当你不确定参数是 ref 还是普通值（比如 props、computed 返回值），unref 更轻量、更安全：
- 传入 ref → 返回 .value
- 传入普通值 → 原样返回
- 它不解 reactive，只处理 ref 类型；想解 reactive 必须用 toRaw
- 常用于函数入参、逻辑判断前的统一取值，避免重复写 isRef 判断
需要深拷贝时选对方法
如果目标是生成一个完全独立、无引用关系的新对象（比如存 localStorage、发请求、防意外修改），不能只靠 toRaw：
立即学习“前端免费学习笔记（深入）”；
- 浅拷贝：{ ...toRaw(obj) } 或 Object.assign({}, toRaw(obj)) —— 适合一层结构，嵌套对象仍共享引用
- 深拷贝（现代环境）：structuredClone(toRaw(obj)) —— 支持 Map/Set/Date 等，且保留响应式剥离后的纯净结构
- JSON 方案慎用：JSON.parse(JSON.stringify(...)) 会丢函数、Symbol、undefined，且无法处理循环引用
别踩这些坑
常见误操作反而让问题更复杂：
- 在模板中调用 toRaw() —— 破坏依赖追踪，每次渲染都执行，毫无必要
- 对 toRaw(ref) 再取 .value —— toRaw(ref) 已是原始值，再点 .value 会报错
- 以为 toRaw 后就能“继续当响应式用”—— 它已脱离响应式系统，改了也不会更新视图
- 用 markRaw 替代 toRaw —— markRaw 是创建时就标记“永远不响应”，不是转换已有响应式对象的工具
