解释 Vue 3 源码中 `toRaw` 和 `markRaw` 的实现，以及它们在与非 Vue 响应式系统交互时，如何避免性能开销和无限循环。

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊 Vue 3 源码里两个相当有意思的小家伙：toRaw 和 markRaw。别看它们名字有点像绕口令，但作用可大了，尤其是在你和那些“不讲武德”的非 Vue 响应式系统打交道的时候。

好，废话不多说，咱们这就开讲！

第一部分：响应式江湖的恩怨情仇

在深入 toRaw 和 markRaw 之前，咱们得先了解一下 Vue 3 响应式系统的基本套路。简单来说，Vue 3 用 Proxy 代理了你的数据，这样当你修改数据的时候，Vue 就能知道，然后更新页面。

举个例子，假设我们有这么一个对象：

import { reactive } from 'vue'

const myData = reactive({
  name: '张三',
  age: 18
})

console.log(myData.name) // 张三

myData.name = '李四' // Vue 知道了！页面会更新！

console.log(myData.name) // 李四

在这个例子里，reactive(myData) 返回的是一个 Proxy 对象，而不是原始的 myData。这个 Proxy 会拦截对 myData 的各种操作（比如读取、修改），然后通知 Vue 的响应式系统。

但是，问题来了！如果你把这个 Proxy 对象传给一个“非 Vue”的世界，比如一个第三方的库，而这个库又对这个对象进行深度遍历，或者做一些奇奇怪怪的操作，那就有可能引发一些意想不到的问题：

性能开销: 每次访问 Proxy 对象的属性，都会触发 Vue 的响应式系统，这会带来额外的性能开销。特别是在遍历一个大型对象的时候，这个开销会非常明显。
无限循环: 某些库可能会在内部修改传入的对象，而这又会触发 Vue 的响应式系统，导致一个无限循环。

为了解决这些问题，Vue 3 提供了 toRaw 和 markRaw 这两个 API。它们就像是两把锋利的宝剑，可以帮助我们斩断响应式系统的“魔爪”，让我们和非 Vue 世界和平相处。

第二部分： toRaw: 返璞归真，找回自我

toRaw 的作用很简单：它会返回一个 reactive 或者 readonly 对象对应的原始对象。就像是把一个被施了魔法的公主，变回了她原本的样子。

咱们来看一个例子：

import { reactive, toRaw } from 'vue'

const myData = reactive({
  name: '张三',
  age: 18
})

const rawData = toRaw(myData)

console.log(rawData === myData) // false
console.log(rawData.name) // 张三

rawData.name = '李四'

console.log(myData.name) // 张三 (myData 没有被改变，因为我们直接修改了 rawData)

在这个例子里，toRaw(myData) 返回的是原始的 myData 对象。注意，修改 rawData 不会触发 Vue 的响应式系统，也不会更新页面。因为我们直接操作的是原始对象，而不是 Proxy 对象。

toRaw 的实现原理

toRaw 的实现其实非常简单，就是在 Proxy 对象上存储一个指向原始对象的引用。当调用 toRaw 的时候，直接返回这个引用即可。

Vue 3 源码中，toRaw 的实现大致如下：

const RAW_KEY = '__v_raw'

function toRaw<T>(observed: T): T {
  const raw = observed && (observed as any)[RAW_KEY]
  return raw ? raw : observed
}

这里 RAW_KEY 是一个 Symbol，用于存储原始对象的引用。当一个对象被 reactive 或者 readonly 代理之后，Vue 会在这个对象上设置 RAW_KEY 属性，指向原始对象。

何时使用 toRaw？

当你需要把一个响应式对象传递给一个不兼容 Vue 响应式系统的第三方库的时候。
当你需要在某些情况下避免触发 Vue 的响应式系统的时候。
当你需要比较两个响应式对象是否指向同一个原始对象的时候。

第三部分： markRaw: 金钟罩铁布衫，刀枪不入

markRaw 的作用是：标记一个对象，使其永远不会被转换为 Proxy 对象。就像是给这个对象穿上了一件金钟罩铁布衫，让它对 Vue 的响应式系统免疫。

咱们来看一个例子：

import { reactive, markRaw } from 'vue'

const myData = {
  name: '张三',
  age: 18
}

markRaw(myData)

const reactiveData = reactive(myData)

console.log(reactiveData === myData) // true (reactiveData 仍然是 myData，没有被代理)

reactiveData.name = '李四' // 不会触发响应式更新
console.log(reactiveData.name) //李四

在这个例子里，markRaw(myData) 标记了 myData 对象，使其永远不会被转换为 Proxy 对象。因此，reactive(myData) 返回的仍然是 myData 对象本身，而不是一个 Proxy 对象。修改 reactiveData.name 也不会触发 Vue 的响应式系统。

markRaw 的实现原理

markRaw 的实现也很简单，就是在对象上设置一个特殊的标记，表示该对象已经被标记为 raw。

Vue 3 源码中，markRaw 的实现大致如下：

const RAW_KEY = '__v_raw'
const IS_MARK = '__v_isMark'

function markRaw<T extends object>(value: T): T {
  def(value, IS_MARK, true)
  return value
}

function def(obj: object, key: string | symbol, value: any) {
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: false,
    value
  })
}

这里 IS_MARK 是一个 Symbol，用于标记对象是否已经被标记为 raw。当一个对象被 markRaw 标记之后，Vue 会在这个对象上设置 IS_MARK 属性，值为 true。然后，在 reactive 和 readonly 的实现中，会检查对象是否已经被标记为 raw，如果是，则直接返回原始对象，不再进行代理。

何时使用 markRaw？

当你有一个对象，你不希望它被转换为 Proxy 对象的时候。比如，某些全局配置对象，或者一些不希望被 Vue 响应式系统管理的外部对象。
当你需要优化性能的时候。如果你知道某个对象永远不会被修改，那么可以使用 markRaw 来避免不必要的 Proxy 代理。

第四部分： toRaw 和 markRaw 的区别

特性	`toRaw`	`markRaw`
作用	返回响应式对象的原始对象	标记一个对象，使其永远不会被转换为响应式对象
影响范围	只影响当前的响应式对象	影响所有试图将该对象转换为响应式对象的操作
使用场景	需要获取原始对象，但仍然希望保持响应式	明确知道某个对象不需要响应式，且希望优化性能
性能	性能开销较小	性能开销更小，因为避免了 `Proxy` 代理
修改返回对象	修改返回的原始对象会影响原始响应式对象	修改标记后的对象，不会触发响应式更新，不建议修改

简单来说，toRaw 是一个“解药”，可以把一个被代理的对象变回原始对象，但不会改变原始对象本身的特性。而 markRaw 是一件“盔甲”，可以保护一个对象，使其永远不会被代理。

第五部分：实战演练：与非 Vue 系统和谐共处

咱们来举一个实际的例子，假设我们正在使用一个第三方的图表库，比如 Chart.js。这个库需要接收一个普通的对象作为配置项，而不是一个 Proxy 对象。

import { reactive, toRaw, onMounted } from 'vue'
import { Chart } from 'chart.js'

export default {
  setup() {
    const chartData = reactive({
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    })

    let chartInstance = null;

    onMounted(() => {
      const ctx = document.getElementById('myChart').getContext('2d');
      chartInstance = new Chart(ctx, {
        type: 'bar',
        data: toRaw(chartData), // 使用 toRaw 获取原始对象
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    });

    return {
      chartData
    }
  },
  template: `
    <canvas id="myChart"></canvas>
  `
}

在这个例子里，我们使用了 toRaw(chartData) 来获取 chartData 的原始对象，然后将其传递给 Chart.js。这样就可以避免 Chart.js 误操作 Proxy 对象，导致一些意想不到的问题。

再举一个例子，假设我们有一个全局的配置对象，我们不希望它被 Vue 的响应式系统管理，因为它的修改频率很低，而且我们希望直接修改它，而不是通过 Proxy 对象。

import { markRaw } from 'vue'

const globalConfig = {
  apiUrl: 'https://api.example.com',
  theme: 'light'
}

markRaw(globalConfig)

export default globalConfig

在这个例子里，我们使用了 markRaw(globalConfig) 来标记 globalConfig 对象，使其永远不会被转换为 Proxy 对象。这样我们就可以直接修改 globalConfig 对象，而不用担心触发 Vue 的响应式系统。

第六部分：总结与展望

toRaw 和 markRaw 是 Vue 3 中两个非常实用的小工具，它们可以帮助我们更好地控制 Vue 的响应式系统，让我们和非 Vue 世界和谐相处。掌握了它们，你就可以在复杂的应用场景中游刃有余，写出更加高效、稳定的代码。

希望今天的讲座对大家有所帮助。如果大家有什么疑问，欢迎在评论区留言，我们一起交流学习。

下次再见！

发表回复 取消回复

发表回复取消回复