Vue3 的 markRaw：如何标记一个对象使其永远不会变为响应式？

1. 为什么需要标记原始对象？

在厨房找食材时，你可能会用磁铁把购物清单贴在冰箱门上。类似的，Vue 的响应式系统会在对象上贴"磁铁"（依赖追踪），当数据变化时就会自动更新视图。但某些重要而沉重的调料罐（比如第三方库实例），我们可能不希望它们被随意触碰。

这就是 markRaw 的舞台。想象你要在冰箱（组件实例）里存放一个古董陶瓷调料罐（不可变对象），这时你会用博物馆级的防震胶固定它——对应到代码中，就是用 markRaw 明确声明："这个对象很特殊，请不要给它贴磁铁"。

2. 动手实验室：基础用法全解析

（技术栈：Vue3 + Composition API）

2.1 简单标签标记

import { reactive, markRaw } from 'vue'

// 🧪 准备实验原料
const rawData = markRaw({ id: 1, name: '神秘试剂' })
const reactiveData = reactive({
  counter: 0,
  // 🚨 刻意混入标记对象
  special: rawData
})

console.log(reactiveData.special === rawData) // ✅ true（保持原对象）
console.log(isReactive(reactiveData.special)) // ❌ false（未激活响应式）

// 🧪 进行化学反应
reactiveData.special.name = '新名字'
console.log(rawData.name) // '新名字' 
// 🔍 修改有效但不会触发视图更新

2.2 复杂对象嵌套测试

const nestedObj = {
  level1: {
    level2: markRaw({
      secret: '机密资料',
      accessLog: []
    })
  }
}

const protectedData = reactive(nestedObj)

protectedData.level1.level2.secret = '已修改'
// 🚩 在控制台中观察不到任何依赖触发警告
// 🕵️ 虽然值已改变，但界面毫无波动

3. 解构化学：底层原理大揭秘

Vue3 使用 Proxy 代理对象时，会通过 __v_skip 这个隐藏标识判断是否跳过响应式处理。markRaw 就像给对象盖了个特殊印章，告诉响应式系统："此人免检"。

实现代码节选：

function markRaw(value) {
  def(value, "__v_skip" /* SKIP */, true)
  return value
}

（摘自 Vue3 源码，@vue/reactivity 模块）

4. 绝妙拍档：与 reactive 的配合使用

4.1 防止内部对象被转化

const routerConfig = markRaw({
  routes: [],
  beforeEach: () => {}
})

const appStore = reactive({
  // ✅ 安全存放配置对象
  config: routerConfig,
  // ...其他响应式数据
})

// 💡 路由变化不会引起视图连锁反应

4.2 高性能表格数据方案

function useBigTable() {
  // 📊 万行数据对象
  const rawDataset = markRaw(Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    value: Math.random()
  })))

  return reactive({
    // 🚀 高效存储
    data: rawDataset,
    currentPage: 1,
    sortKey: 'id'
  })
}

5. 场景直击：实战应用场景

场景一：防止配置对象突变

// 📜 表单验证配置
const validationSchema = markRaw({
  name: { required: true, minLength: 3 },
  email: { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ }
})

// 🔒 安全注入组件
provide('validations', validationSchema)

场景二：游戏引擎集成

// 🎮 Phaser 游戏实例
const gameInstance = markRaw(new Phaser.Game(config))

onMounted(() => {
  // 🖥️ 挂载到 DOM
  container.value.appendChild(gameInstance.canvas)
})

// 💻 销毁时避免响应式追踪出错
onUnmounted(() => gameInstance.destroy())

6. 避坑指南：性能与安全注意事项

6.1 防错技巧三则

1. 类型守卫：对可能被标记的对象添加类型注释

interface RawConfig {
  readonly apiEndpoint: string
}

const config = markRaw<RawConfig>({
  apiEndpoint: 'https://api.example.com'
})

2. 批量处理：使用工厂函数封装常见模式

function createImmutableConfig(config) {
  return markRaw(Object.freeze(config))
}

3. 调试断言：开发环境添加检查

if (__DEV__ && isReactive(suspectedRawObj)) {
  console.warn('意外响应式对象！检查markRaw使用')
}

7. 技术比较：相关API适用场景

8. 总结：合适场景的正确选择

就像选择厨房工具，响应式系统不是万能的。当遇到以下情况时，记得拿出 markRaw 这把特殊刀具：

• 处理高频更新的庞大数据
• 对接外部库的实例对象
• 需要长期驻内存的配置信息
• 存在循环引用的复杂结构