toRaw用于获取响应式对象背后的原始JavaScript对象，绕过Proxy代理层，适用于传入第三方库、底层比较、跳过依赖收集等场景。
toRaw 的作用是获取响应式对象背后的原始 JavaScript 对象，绕过 Proxy 代理层。它不用于日常数据操作，而是在特定场景下“脱敏”响应式包装，比如传给外部非 Vue 库、做深度比较、或避免触发依赖收集。
什么时候必须用 toRaw？
以下情况推荐使用 toRaw：
- 把响应式对象传给第三方库（如 Chart.js、Mapbox），这些库可能因 Proxy 代理报错或行为异常
- 需要对响应式对象做 Object.is、=== 或 JSON.stringify 等底层操作，避免被 Proxy 干扰
- 在 watch 或 computed 中想跳过响应式追踪，只读取当前快照值（注意：不是 reactive 的“快照”，而是原始引用）
- 调试时快速确认数据是否真的被修改，而非 Proxy 拦截导致的假象
怎么正确调用 toRaw？
toRaw 是 Vue 3 的内置函数，需从 vue 包中解构导入：
import { toRaw } from 'vue'
立即学习“前端免费学习笔记（深入）”；
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
用法很简单，传入一个响应式对象（ref、reactive、readonly 返回的值）即可：
const raw = toRaw(state)
⚠️ 注意：
– toRaw 对普通对象、数组、原始值（string/number）直接返回原值，不报错但无实际意义
– toRaw 不能逆转 readonly 或 shallowRef，它只“剥掉” reactive/ref 的 Proxy 层，不解除只读限制
– toRaw 返回的对象仍是同一内存引用，不是深拷贝
常见误区和替代方案
别误以为 toRaw 能“停止响应”或“生成副本”：
- ❌ 错误认知：“用了 toRaw 就不会更新视图了” → 实际上，若你把 toRaw 结果再赋值回响应式字段，仍会触发更新
- ❌ 错误用法：toRaw(ref(1)) → ref 的 .value 是原始值，toRaw(ref(1)) 返回的是 ref 本身（非响应式 wrapper），应写成 toRaw(ref(1).value) 或更合理地直接用 ref.value
- ✅ 更安全的替代：需要只读快照时，优先考虑 shallowRef 或 markRaw（用于标记不转响应式）；需要结构克隆时，用 structuredClone 或 lodash.cloneDeep
一个小例子帮你理解
假设你有一个 reactive 用户对象，并要传给某个不兼容 Proxy 的校验函数：
const user = reactive({ name: 'Alice', age: 30 })
const validator = (obj) => typeof obj === 'object' && obj.name // 原始校验逻辑
console.log(validator(user)) // 可能为 false —— 因为 Proxy 对象 typeof 仍是 'object'，但某些内部属性访问异常
console.log(validator(toRaw(user))) // true，且访问 name 不触发 getter
此时 toRaw 提供了干净、可预测的原始数据入口。
