toRaw 是 Vue 3 用于安全获取响应式对象原始值的工具函数，跳过 Proxy 返回非响应式裸数据，适用于第三方库交互、JSON 序列化、手动比对等场景，但不解除响应式且仅解一层代理。
toRaw 是 Vue 3 提供的一个工具函数，用于**安全地获取响应式对象（ref、reactive、computed 等）背后的原始 JavaScript 对象或值**，跳过 Proxy 包装，返回非响应式的“裸数据”。它不解除响应式，只是临时读取原始形态，常用于与外部库（如第三方图表、JSON 序列化、DOM 操作）交互时避免 Proxy 干扰。
什么时候需要用 toRaw？
常见于以下场景：
- 将响应式对象传给不兼容 Proxy 的库（例如某些老版本的 ECharts、D3 或 moment.js）；
- 需要对对象做 JSON.stringify —— 响应式对象直接序列化可能报错或包含大量内部属性；
- 手动对比两个响应式对象是否“内容相同”，而不想被 Proxy 或 getter 影响；
- 在某些底层操作中（如自定义渲染器、插件开发）需访问原始值而非代理实例。
怎么用 toRaw？
导入后直接调用即可，支持 reactive、ref、computed 等所有响应式包装类型：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
import { reactive, ref, computed, toRaw } from 'vue'
<p>const state = reactive({ count: 1, name: 'Vue' })
const countRef = ref(42)
const double = computed(() => countRef.value * 2)</p><p>console.log(toRaw(state)) // { count: 1, name: 'Vue' } —— 普通对象
console.log(toRaw(countRef)) // 42 —— 原始值（ref 的 .value）
console.log(toRaw(double)) // 84 —— computed 的当前计算结果（非 ref，是值）
注意：toRaw 对普通对象或原始值（string/number）直接返回自身，不会报错，所以可放心调用，无需提前判断类型。
立即学习“前端免费学习笔记（深入）”；
重要注意事项
- toRaw 不是“解除响应式”：它只返回快照，原响应式对象仍保持响应性，修改原始对象不会触发更新，修改响应式对象也不会影响 toRaw 返回的对象；
- 不能用于 setup() 外部或非组合式 API 环境（比如 Options API 中不可直接 import 使用）；
- 慎用于嵌套响应式结构：toRaw 只解一层 Proxy，若对象内嵌了 reactive，内部属性仍是响应式代理，需递归调用（但通常不推荐，应按需解包）；
- 不要用 toRaw 来“绕过响应式”做状态管理：这会破坏 Vue 的依赖追踪机制，导致视图不更新。
替代 toRaw 的常见做法（更推荐优先考虑）
多数情况下，与其依赖 toRaw，不如从设计上规避问题：
- 用 shallowRef 或 markRaw 标记不需要响应式的大型外部对象（如 Three.js 场景、Canvas 实例）；
- 对 JSON 序列化，用 JSON.stringify(JSON.parse(JSON.stringify(obj))) 或 structuredClone（现代环境）更稳妥；
- 与第三方库配合时，优先查阅其文档 —— 很多新版本已支持 Proxy 或提供适配方法。
