markRaw()需在对象进入响应式系统前调用，标记后返回原对象并添加__v_skip: true，使Vue跳过代理；适用于第三方库实例、静态配置、超大只读结构等无需响应的场景。
直接用 markRaw() 包裹目标对象，再把它放进 reactive 或 ref 里，Vue 就不会对它做响应式处理。
markRaw 的核心用法
它不是事后补救，而是在对象进入响应式系统前就“盖章”跳过。调用后返回原对象，并悄悄加上 __v_skip: true 标记，Vue 内部看到这个标记就绕道走。
- 必须在对象被
reactive、ref或shallowRef处理之前调用 - 不能对已经响应式的对象再调用
markRaw—— 它不起作用 - 标记后的对象和普通 JS 对象行为一致：改属性不触发更新，也不收集依赖
常见适用场景
判断标准只有一个：这个数据变了，你也不希望视图跟着变。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
第三方库实例：比如
new ECharts(dom)、new Map()、axios.create()。这些库靠原始引用或自有状态管理，Proxy 劫持反而会破坏它们的逻辑 -
静态配置或枚举值：例如
{ PENDING: 'pending', SUCCESS: 'success' }或['Draft', 'Published']，内容固定，无需响应 - 超大只读结构：上万节点的树、地理坐标集合、离线字典表。劫持成本高，且业务上根本不改
- DOM 元素、函数、组件实例：这些本就不该进响应式系统，标记后更安全
正确写法示例
重点是“先标记，再放入响应式容器”：
立即学习“前端免费学习笔记（深入）”；
import { markRaw, reactive } from 'vue'
// ✅ 正确：提前标记
const chartInstance = markRaw(new ECharts(dom))
const apiConfig = markRaw({ baseURL: 'https://api.example.com' })
const state = reactive({
chart: chartInstance, // 不会被代理
config: apiConfig // 不会被代理
})
// ❌ 错误：先放进去再标记，没用
const badState = reactive({ chart: new ECharts(dom) })
markRaw(badState.chart) // 已经是响应式了，标记无效
配合 ref 使用的注意事项
如果用 ref 存储标记过的对象，要记得访问时用 .value，但它的值本身仍是普通对象：
const chartRef = ref(markRaw(new ECharts(dom)))-
chartRef.value.setOption(...)可以正常调用（因为它是原生实例） -
chartRef.value = anotherChart会触发 ref 的响应式更新，但新值仍需markRaw才能跳过劫持
