toRaw用于从响应式代理中获取原始对象，绕过响应式系统；适用于传入不兼容Proxy的第三方库或纯数据操作场景，修改原始对象会同步到响应式对象但不触发更新。
toRaw 的作用很直接：它帮你从一个响应式代理对象里“掏出”背后那个普通的、没被 Proxy 包裹的原始对象。这不是取消响应式，而是临时绕过它——读写都不触发依赖追踪，也不引起视图更新。
什么时候该用 toRaw
核心就两类场景：
- 传给不认 Proxy 的第三方库：比如 ECharts、axios、moment、或者某些老版本 UI 组件，它们内部做对象遍历或深比较时遇到 Proxy 容易出错或性能差，先 toRaw 再传更稳；
- 需要纯数据操作且不想触发更新：比如表单防重复提交时做 JSON.stringify 对比、导出数据前做格式化、调试时想看清真实结构，这些都不需要 Vue 跟着动。
怎么用？三步到位
先确保你用的是 reactive / readonly / shallowReactive 创建的对象（ref.value 是普通值，toRaw 对它基本没变化）：
- 导入：
import { reactive, toRaw } from 'vue'； - 创建响应式对象：
const data = reactive({ name: '小明', list: [1, 2] })； - 取原始版：
const raw = toRaw(data)，此时 raw 就是普通对象，raw.name = '大明'不会刷新页面，但data.name也会变成 '大明'（内存同一份）。
要注意的几个关键点
别踩这几个常见坑：
- 对 ref 包装的原始值（如
ref(100)）调用 toRaw，返回的还是 ref 本身，不是数字 100；真要取值得写toRaw(ref).value或直接ref.value； - 修改 toRaw 返回的对象，数据确实会同步到响应式对象里，但不会触发更新——这点容易误以为“失效”，其实是设计如此；
- 不要长期保存 toRaw 得到的对象引用，尤其在组件卸载后还拿着它，可能引发内存泄漏或状态不一致。
和 markRaw 的区别在哪
简单说：toRaw 是“事后取原始”，markRaw 是“事前贴免代理标签”。
- toRaw 用于已有响应式对象，你想临时用它的原身；
- markRaw 用在你创建对象之初，告诉 Vue：“这个对象永远别给我转成响应式”，比如塞进 reactive 里的第三方类实例、Canvas 上下文、或大型静态列表项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
