markraw() 使对象彻底免疫响应式系统，不创建新对象而仅打标记；适用于第三方实例、静态配置、dom 元素及大体积不可变数据，且操作不可逆。

直接用 markRaw() 包一层，这个对象就彻底“免疫”响应式系统了——哪怕放进 reactive 或嵌套在其他响应式对象里，也不会被代理，内部属性也不会被递归处理。

核心用法：标记即生效

它不创建新对象，只是给原对象打个标记，返回的还是那个对象本身：

React Native Skills

{"answer":"构建高性能移动应用的 React Native 与 Expo 最佳实践。适用于构建组件、优化列表性能、实现……"}

下载

• import { markRaw, reactive } from 'vue'
• const rawObj = markRaw({ a: 1, b: { c: 2 } })
• const state = reactive({ data: rawObj })
• console.log(isReactive(state.data)) // false
• console.log(isReactive(state.data.b)) // false（嵌套也不代理）

典型使用场景

不是所有对象都需要响应式，强行代理反而带来开销或问题：

• 第三方库实例：如 ECharts、Map 实例、Axios 实例。它们自带状态和方法，被 proxy 后可能出错或变慢
• 静态配置数据：地区列表、枚举值、API 基础配置等，只读且永不变更
• DOM 元素或组件实例：比如通过 ref 拿到的 <canvas></canvas> 或子组件实例，不需要响应式追踪
• 大体积不可变数据：渲染长列表时，原始数据源若确定不变，跳过响应式转换能明显提升初始化性能

常见误区提醒

markRaw 是一次性、不可逆的操作：

• 标记后，即使后续再传给 reactive 或 ref，也不会变成响应式
• 它不影响对象本身的行为，只是告诉 Vue：“别碰它”
• 不要和 toRaw 混用：toRaw 是把已有的响应式代理“还原”成原始对象；markRaw 是从源头阻止代理发生
• 不能用于普通变量赋值后补标：必须在对象创建时或传入响应式系统前调用

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