Vue3 markRaw 怎么跳过不需要响应式的数据？

Question

仓乃文 · Accepted Answer

当响应式对象中包含不需要响应式的数据（如第三方库实例、静态配置、不可变数据）时，Vue 会尝试将其转为 Proxy，浪费性能甚至报错。markRaw 标记对象永远不会被转为响应式，跳过代理转换。

跳过第三方库实例：
```javascript
import { reactive, markRaw } from "vue";
import Chart from "chart.js";
const state = reactive({
  chart: markRaw(new Chart(ctx, config))  // 不会被代理
});
```

跳过静态配置：
```javascript
const staticConfig = markRaw({
  API_BASE: "https://api.example.com",
  MAX_SIZE: 1024
});
const state = reactive({ config: staticConfig });  // config 不会被深度代理
```

补充说明：
- markRaw 是单向的，标记后无法恢复为响应式
- 被标记的对象仍然可以被正常读取，只是不会被 Proxy 代理
- 常见场景：ECharts/Chart.js 实例、Map/Set、class 实例、不可变常量
- 如果只是想浅层代理，用 shallowReactive 或 shallowRef 更合适
- markRaw 对象被嵌套在 reactive 内部时，Vue 会跳过它的响应式转换