markraw()必须在对象进入响应式系统前调用，否则失效；它标记对象跳过代理，适用于第三方实例、静态配置和大数据结构，且仅支持对象类型。
直接用 markRaw() 包一层，再放进 reactive 或 ref 里，它就不会被代理 —— 这是唯一有效的方式。
必须在进入响应式系统前调用
标记动作一定要发生在对象被 reactive、shallowReactive 或 ref 处理之前。一旦进了响应式系统，markRaw 就失效了。
- ✅ 正确：先
markRaw(obj)，再reactive({ data: markedObj }) - ❌ 错误：先
reactive(obj)，再对结果调用markRaw - ⚠️ 注意：
markRaw返回的是原对象（加了__v_skip: true标记），不是新副本
典型使用场景和写法
常见需要跳过响应式处理的数据类型，基本就这三类：
-
第三方库实例：如
new ECharts(dom)、new Map()、axios.create() -
静态配置或枚举：如状态映射表
{ 1: '待审核', 2: '已通过' }，或选项数组['Draft', 'Published'] - 超大结构数据：比如上万节点的树、离线字典、坐标集合等，改了也不需要触发视图更新
示例：
import { markRaw, reactive } from 'vue'
const chartInstance = markRaw(new ECharts(dom))
const STATUS_OPTIONS = markRaw({ 1: '启用', 0: '禁用' })
const bigTreeData = markRaw(loadHugeTree())
const state = reactive({
chart: chartInstance,
statusMap: STATUS_OPTIONS,
tree: bigTreeData
})
和 toRaw 的关键区别
别把两者混用：
- markRaw 是“事前贴标签”：告诉 Vue “这个对象从一开始就不许动”，适用于普通对象
-
toRaw 是“事后拆包裹”：把已经
reactive出来的 Proxy 对象，还原成原始对象，只对响应式对象有效 - 它们不能互相替代，也不能链式调用 ——
toRaw(markRaw(obj))没意义，因为markRaw(obj)本就不是响应式对象
注意事项
几个容易踩坑的地方：
- 只能作用于对象，不支持字符串、数字、布尔值等基础类型
- 标记后整个对象及其嵌套属性都跳过响应式转换（但若嵌套里已有 reactive 对象，那些仍保持响应式）
- 标记过的对象后续无法再被
reactive转为响应式 —— 它被 Vue 彻底“放行”了 - 如果误标了本该响应式的对象，变化不会触发视图更新，调试时需留意
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
