toRaw用于获取响应式对象背后的原始JavaScript对象，绕过Proxy代理层；适用于传入不兼容Proxy的第三方库、纯数据操作（如JSON.stringify、防重复提交比对）等场景，修改原始对象会同步到响应式对象但不触发更新。
Vue 响应式对象和原始对象不是“互转”关系，而是“代理与本体”的共存关系。toRaw 不是转换工具，而是访问原始数据的快捷通道——它不创建副本，也不解除响应式，只是绕过 Proxy 拦截，拿到同一块内存里的普通 JS 对象。
什么时候必须用 toRaw
核心就两类真实需求：
- 第三方库报错或行为异常：ECharts、D3、Three.js、axios 配置、moment 处理等，遇到 Proxy 会遍历失败、序列化出错或性能骤降，必须传 toRaw(data)；
- 纯数据操作不想触发更新：比如对万级数组做批量排序、过滤、JSON.stringify 存 localStorage、表单防重复提交比对、调试时打印干净结构——这些场景里，响应式开销是冗余的。
怎么正确调用 toRaw
关键看输入类型：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 对 reactive / shallowReactive / readonly 创建的对象，toRaw 直接返回其原始对象（修改 raw 会同步到响应式对象，但不触发更新）；
- 对 ref，toRaw 返回的是 ref 所包装的原始值（如 toRaw(ref(100)) 得到数字 100），不能再链式调用 .value；
- 对 普通对象、数组、null、undefined，toRaw 原样返回，无副作用。
常见踩坑点
- 嵌套响应式对象只解一层：若 state.obj 是 reactive({ items: reactive([1,2]) })，toRaw(state.obj) 得到的对象中 items 仍是 Proxy，需手动 toRaw(state.obj.items) 或配合递归处理；
- 别在模板里用 toRaw：破坏依赖追踪，且每次渲染都执行，毫无必要；
- 不要拿 toRaw 结果长期持有：尤其在组件卸载后还引用它，可能造成内存泄漏或状态不一致；
- 不能靠 toRaw 实现“解除响应式”：它返回的原始对象一旦脱离 Vue 管理，后续修改就不会触发视图更新——这不是 bug，是设计意图。
toRaw 和 markRaw 的本质区别
两者方向相反，常配合使用：
立即学习“前端免费学习笔记（深入）”；
- toRaw：已有响应式对象 → 临时取出原始本体（“事后取原身”）；
- markRaw：创建对象之初 → 告诉 Vue “永远别代理它”（“事前贴免代理标签”），适合传入 new Chart()、Canvas.getContext、大型静态配置项等。
