toRaw 是 Vue 3 中用于安全获取 reactive/readonly 代理对象原始普通对象的工具，不破坏响应式也不触发更新；它仅对 Proxy 实例有效，适用于传参第三方库、watch 比对、日志打印等场景。

toRaw 是 Vue 3 组合式 API 中用于安全获取响应式对象原始数据的关键工具。它不破坏响应式，也不触发更新，只帮你“退一步”拿到最底层的普通对象。

toRaw 的核心用途

当你用 reactive() 或 readonly() 创建了代理对象后，Vue 内部会用 Proxy 包裹它。这个代理对象在模板或逻辑中能自动触发更新，但有时你只想读它的原始值、传给第三方库、或做一次性计算——这时 toRaw 就是唯一推荐的“解包”方式。

如何正确使用 toRaw

• 必须传入 reactive/readonly 生成的代理对象
  toRaw() 只对 Proxy 实例有效。对 ref（尤其是基本类型）或普通对象调用会直接返回原值，但没实际意义；对 shallowRef 包裹的对象也无效。

• 返回的是原始对象，修改它不会影响响应式状态

  

  Springboot Vue Builder

  从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

  下载

  立即学习“前端免费学习笔记（深入）”；

  import { reactive, toRaw } from 'vue'
  
  const state = reactive({ count: 0, user: { name: 'Alice' } })
  const raw = toRaw(state)
  
  state.count = 1        // ✅ 触发视图更新
  raw.count = 999        // ❌ 不触发更新，且下次 toRaw(state) 仍返回原始结构
  console.log(raw.count) // 999（仅本地改，不影响 state）

• 嵌套对象也适用，但注意“浅层解包”
  toRaw(state) 返回的是整个代理对应的原始对象，包括其嵌套属性仍是普通对象（非响应式），但它们本身不是 toRaw 的目标——你不需要对 state.user 单独调用 toRaw，除非它自己也是 reactive() 创建的。

• 典型使用时机

  • 把数据传给 ECharts、Leaflet 等不兼容 Proxy 的库
  • 在 watch 回调里比对前后值，避免触发新依赖
  • 日志打印时防止控制台显示 Proxy 乱码
  • 手动深克隆前先 toRaw，避免克隆代理逻辑

常见误区提醒

• 不要用 JSON.parse(JSON.stringify(obj)) 替代 toRaw：会丢失函数、undefined、Date、RegExp 等类型，且性能差。
• 不要对 ref 调用 toRaw：ref 的原始值直接用 .value 获取即可；toRaw 是专为 reactive 设计的。
• 不要在模板中直接使用 toRaw(obj)：它返回普通对象，无法响应式更新，可能导致视图不同步。

不复杂但容易忽略。