toraw用于获取响应式对象背后的原始javascript对象，绕过proxy代理层；适用于传入不兼容proxy的第三方库、纯数据操作（如json.stringify、防重复提交比对）等场景，修改原始对象会同步到响应式对象但不触发更新。

Vue 响应式对象和原始对象不是“互转”关系，而是“代理与本体”的共存关系。toRaw 不是转换工具，而是访问原始数据的快捷通道——它不创建副本，也不解除响应式，只是绕过 Proxy 拦截，拿到同一块内存里的普通 JS 对象。

什么时候必须用 toRaw

核心就两类真实需求：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 第三方库报错或行为异常：ECharts、D3、Three.js、axios 配置、moment 处理等，遇到 Proxy 会遍历失败、序列化出错或性能骤降，必须传 toRaw(data)；
• 纯数据操作不想触发更新：比如对万级数组做批量排序、过滤、JSON.stringify 存 localStorage、表单防重复提交比对、调试时打印干净结构——这些场景里，响应式开销是冗余的。

怎么正确调用 toRaw

关键看输入类型：

• 对 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、大型静态配置项等。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！