markRaw 的核心作用是让 Vue 完全跳过对象，不将其转为响应式代理；适用于第三方库实例、大型静态配置、需保持原始引用的对象，且必须在 reactive/ref 前调用，不可撤销。
markRaw 的核心作用，是让 Vue 完全跳过某个对象，不把它变成响应式代理——它不会被 Proxy 包裹，也不会触发依赖收集和视图更新。
哪些数据适合用 markRaw？
不是所有对象都需要响应式。以下几类最典型：
- 第三方库的实例：比如 Three.js 的渲染器、ECharts 的图表实例、Leaflet 的地图对象。它们内部有复杂的状态管理和方法调用，被 Vue 代理后容易出错或性能下降。
- 大型静态配置或数据结构：例如含上万条字段的 API 配置、主题样式表、国际化语言包。这些数据初始化后就不再变更，响应式转换纯属浪费内存和 CPU。
-
需要保持原始引用的对象：比如你用
new Date()、new Map()或自定义 class 实例，希望在组件间传递时始终是同一个引用，而不是被 Vue 替换成代理对象。
怎么用？记住两个关键点
markRaw 是一个“一次性标记”，调用后对象就彻底脱离响应式系统：
- 它必须在对象被放入
reactive或ref之前使用，或者作为嵌套属性传入； - 一旦标记，就不可撤销——后续无论你怎么操作，Vue 都不会再尝试代理它或它的子属性。
示例：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
const config = markRaw({ apiUrl: 'https://api.dev', timeout: 3000 });const state = reactive({ user: {}, settings: config }); // settings 不会变响应式
常见误用提醒
markRaw 不是“性能开关”按钮，乱用反而会埋坑：
- 别对本该响应式的业务数据用它——比如用户表单字段、列表筛选状态，用了就收不到更新；
- 别在模板中直接修改 markRaw 标记过的对象属性，改了也看不到视图变化；
- 它不解决深层嵌套响应式问题——如果一个对象里某个属性被 markRaw，只影响那个属性，其他属性照常响应式。
和 toRaw 有什么区别？
toRaw 是“临时解包”，用于读取或传参时绕过代理；markRaw 是“永久豁免”，从源头阻止代理发生。你可以理解为：
– toRaw 是借钥匙进一次保险柜，拿完东西就还钥匙；
– markRaw 是直接把某件物品从保险柜里拿出来，永远不放回去。
