Vue3 markRaw标记对象跳过响应式代理提升性能

Vue3 的响应式系统基于 Proxy 构建，能自动追踪依赖并在数据变化时触发视图更新。但在处理一些只读、庞大或第三方库对象时，强制将其转化为响应式对象不仅浪费内存，还会导致不必要的性能开销。markRaw API 专门用于解决这一问题，它可以将对象标记为“永远不转换为响应式”，从而显著提升运行效率。

一、 理解核心原理：为什么需要 markRaw

Vue3 默认会对 reactive 或 ref 传入的对象进行递归代理。这意味着对象内部的每一个嵌套属性都会被包裹一层 Proxy。对于静态配置、复杂的第三方类实例（如 Monaco Editor 实例、Three.js 模型）或永不变化的大数据列表，这种转换是多余的资源消耗。

markRaw 的作用是告诉 Vue 的响应式系统：“这个对象请直接使用，不要对其进行代理”。被标记后的对象，即使在响应式上下文中被访问，也能保持原样，跳过依赖收集和 Proxy 劫持。

以下流程图展示了普通对象与被 markRaw 标记的对象在 Vue 系统中的处理差异：

二、 基础步骤：使用 markRaw 标记静态配置

适用于处理项目中只读一次、永不改变的配置文件或字典数据。

1. 打开 Vue3 组件文件（如 src/components/MyComponent.vue）。
2. 导入 markRaw 函数。在 <script> 标签内，从 vue 包中解构出 markRaw。

import { markRaw } from 'vue';

3. 定义 静态配置对象。假设有一个包含大量键值对的字典。

const staticDictionary = {
  key1: 'value1',
  key2: 'value2',
  // ... 假设有成千上万条数据
};

4. 调用 markRaw 包装该对象。

const rawDict = markRaw(staticDictionary);

5. 使用 被标记的对象。将其放入 reactive 对象或 setup 返回值中。在模板中渲染时，Vue 不会尝试深度代理 rawDict。

import { reactive } from 'vue';

const state = reactive({
  config: rawDict // rawDict 保持为非响应式原始对象
});

此时，访问 state.config.key1 不会有任何响应式开销。如果尝试修改 state.config.key1 = 'new value'，Vue 也不会触发视图更新。

三、 进阶步骤：优化第三方类实例与复杂对象

在使用第三方库（如 Lodash 工具链、PDF.js 文档对象或 ECharts 实例）时，这些类实例通常包含复杂的内部逻辑和循环引用，强制代理容易导致报错或严重卡顿。

1. 安装 或引入第三方库。以下以模拟一个简单的 HeavyClass 为例。

class HeavyClass {
  constructor(data) {
    this.data = data;
    this.internalState = new Array(10000).fill('data');
  }

  process() {
    console.log('Processing heavy logic');
  }
}

2. 实例化 类对象。

const myInstance = new HeavyClass('demo-data');

3. 标记 实例对象。输入 markRaw(myInstance)。

const rawInstance = markRaw(myInstance);

4. 挂载 到响应式状态中。

const appState = reactive({
  heavyWorker: rawInstance
});

5. 调用 实例方法。在组件的生命周期钩子或事件处理函数中，执行 方法。

// 在 onMounted 或方法中
appState.heavyWorker.process();

由于 rawInstance 被标记了，Vue 不会代理 heavyWorker，直接操作原生 JavaScript 对象，避免了 Proxy 带来的性能损耗。

四、 关键差异对比：reactive vs markRaw

为了更清晰地理解何时使用 markRaw，请参考下表对比两种方式的行为差异。

五、 常见陷阱与注意事项

在使用 markRaw 时，必须严格遵守以下规则，否则可能导致逻辑错误或调试困难。

1. 避免 随意修改被标记对象的属性。由于 markRaw 对象不具备响应式，直接修改其属性（如 rawObj.prop = 1）不会触发界面刷新。如果后续需要通过修改属性来驱动视图，请不要使用 markRaw。

2. 注意 嵌套对象的响应式丢失。如果将一个包含子对象的父对象标记为 markRaw，其内部的子对象也不会被自动转换为响应式。

const parent = markRaw({
  child: { count: 0 }
});

const state = reactive({ parent });

// 以下操作不会触发视图更新，因为 parent 是 raw 的
state.parent.child.count++;

若需要 child 保持响应式，必须先定义响应式的 child，再将其赋值给 parent，或者分别处理。

3. 禁止 将 markRaw 用于临时状态。如果一个数据在生命周期中只是“暂时”不需要响应式，而后续可能需要，请考虑使用 shallowRef 或 shallowReactive，不要使用 markRaw，因为该标记是永久性的，无法撤销。

4. 检查 模板中的绑定。确保模板中没有直接双向绑定（v-model）到 markRaw 对象的属性。v-model 依赖响应式更新，绑定到非响应式属性会导致输入框内容无法同步。

// 错误示范
const form = markRaw({ username: '' });
// 模板：<input v-model="form.username" /> 
// 结果：输入无效，因为 username 不是响应式的

六、 实战演练：构建高性能不可变列表

假设需要渲染一个包含 10,000 条只读数据的列表，直接使用 reactive 会导致页面初始化卡顿。

1. 准备 大数据源。

function generateBigData() {
  const data = [];
  for (let i = 0; i < 10000; i++) {
    data.push({ id: i, text: `Item ${i}` });
  }
  return data;
}

const bigDataSource = generateBigData();

2. 标记 数据源。

const readonlyList = markRaw(bigDataSource);

3. 设置 组件状态。

import { ref } from 'vue';

const list = ref(readonlyList);

4. 渲染 列表。在模板中使用 v-for。

<ul>
  <li v-for="item in list" :key="item.id">
    {{ item.text }}
  </li>
</ul>

通过这种方式，Vue 不会代理这 10,000 个对象。列表渲染依然正常，因为 Vue 能够读取数组数据，只是跳过了深度代理过程，大幅降低了初始化时间。

执行 代码后，观察控制台或性能面板，你会发现初始化耗时相比直接使用 reactive(bigDataSource) 显著减少。