Vue Composition API怎么使用 markRaw 标记对象永远不转换为响应式-Vue.js-PHP中文网

markraw()需在对象进入响应式系统前调用，标记后返回原对象并添加__v_skip: true，使vue跳过代理；适用于第三方库实例、静态配置、超大只读结构等无需响应的场景。

vue composition api怎么使用 markraw 标记对象永远不转换为响应式

直接用 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) // 已经是响应式了，标记无效