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

早上好，各位同学！今天咱们来聊聊 Vue 3 源码里两个听起来有点“生猛”的函数：toRaw 和 markRaw。它们就像是 Vue 响应式系统的“解毒剂”和“绝缘体”，能帮助我们摆脱响应式带来的性能开销，避免一些奇奇怪怪的循环依赖问题。

咱们先来简单回顾一下 Vue 的响应式系统。Vue 3 采用了基于 Proxy 的观察者机制。简单来说，当你访问一个响应式对象的属性时，Vue 会自动追踪这个依赖，并在属性值发生改变时，通知所有依赖这个属性的组件进行更新。这个机制非常强大，但有时候也会带来一些不必要的性能开销，甚至引发一些意想不到的问题。

想象一下，你有一个超级复杂的第三方库，它自己管理着数据状态，完全不需要 Vue 的响应式系统插手。如果你直接把这个库的数据赋给 Vue 的响应式对象，那么 Vue 就会尝试“响应式化”这个数据，这不仅浪费资源，还可能破坏第三方库的内部逻辑。

这时候，toRaw 和 markRaw 就派上用场了。它们就像是两把不同的工具，帮助我们优雅地处理这些场景。

一、toRaw：解毒剂，把响应式对象“还原”成普通对象

toRaw 的作用很简单：它接收一个响应式对象（或者一个 Proxy 对象），然后返回这个对象原始的、未被响应式系统“污染”的版本。

我们先来看看 toRaw 在源码中的实现（简化版）：

// packages/reactivity/src/reactive.ts

import { isReactive, isReadonly, toReactive } from './reactive';
import { hasOwn } from '@vue/shared';

const toRawMap = new WeakMap<any, any>();
const reactiveMap = new WeakMap<any, any>();
const readonlyMap = new WeakMap<any, any>();

export function toRaw<T>(observed: T): T {
  const existing = toRawMap.get(observed);
  if (existing) {
    return existing;
  }

  return observed;
}

export function markRaw<T extends object>(value: T): T {
  def(value, ReactiveFlags.SKIP, true)
  return value
}

从代码中可以看到，toRaw 实际上做的事情非常简单。它首先会检查是否已经缓存过这个对象的原始版本，如果存在就直接返回缓存的版本。如果没有缓存，就直接返回传入的对象本身。

你可能会疑惑：直接返回传入的对象？那如果传入的对象本身就是响应式的呢？

这就是 toRaw 的巧妙之处。Vue 的响应式对象实际上是一个 Proxy 对象，它拦截了对原始对象的各种操作。toRaw 返回的是原始对象，绕过了 Proxy 的拦截，因此也就绕过了响应式系统。

为了更直观地理解，我们来看一个例子：

import { reactive, toRaw } from 'vue';

const rawObject = { name: 'Alice', age: 30 };
const reactiveObject = reactive(rawObject);

console.log(reactiveObject.name); // "Alice" （访问的是 Proxy 对象，触发了 get 拦截）

const originalObject = toRaw(reactiveObject);
console.log(originalObject.name); // "Alice" （访问的是原始对象，没有触发 get 拦截）

originalObject.name = 'Bob';
console.log(originalObject.name); // "Bob" （修改的是原始对象，不会触发响应式更新）
console.log(reactiveObject.name); // "Alice" （响应式对象的值没有改变）

在这个例子中，reactiveObject 是一个响应式对象，当我们访问 reactiveObject.name 时，会触发 Proxy 的 get 拦截器，从而建立依赖关系。而 originalObject 是通过 toRaw 获取的原始对象，访问 originalObject.name 不会触发任何拦截，修改 originalObject.name 也不会触发响应式更新。

所以，toRaw 就像是一个“解毒剂”，它可以把响应式对象“还原”成普通对象，让我们可以直接操作原始数据，而不用担心触发不必要的响应式更新。

什么情况下我们需要使用 toRaw 呢？

• 与第三方库集成： 当你使用一个自己管理状态的第三方库时，可以使用 toRaw 获取原始数据，避免 Vue 响应式系统干扰第三方库的运行。
• 性能优化： 在某些场景下，频繁的响应式更新会带来性能瓶颈。你可以使用 toRaw 暂时绕过响应式系统，直接操作原始数据，然后在合适的时机手动触发更新。
• 比较原始值： 有时候，我们需要比较两个响应式对象的原始值是否相等。直接比较响应式对象可能会因为 Proxy 的原因导致结果不准确，这时可以使用 toRaw 获取原始值进行比较。

二、markRaw：绝缘体，让对象“免疫”响应式系统

markRaw 的作用是：标记一个对象，使其永远不会被转换为响应式对象。它就像是一个“绝缘体”，防止 Vue 响应式系统“触电”。

我们再来看看 markRaw 在源码中的实现（简化版）：

// packages/reactivity/src/reactive.ts

import { def } from '@vue/shared'
import { ReactiveFlags } from './reactive'

export const enum ReactiveFlags {
  SKIP = '__v_skip',
  IS_REACTIVE = '__v_isReactive',
  IS_READONLY = '__v_isReadonly',
  RAW = '__v_raw'
}

function def(obj, key, value) {
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: false,
    value
  })
}

export function markRaw<T extends object>(value: T): T {
  def(value, ReactiveFlags.SKIP, true)
  return value
}

从代码中可以看到，markRaw 实际上是在对象上添加了一个 __v_skip 属性，并将其值设置为 true。这个 __v_skip 属性是一个内部标识，用于告诉 Vue 响应式系统：这个对象不需要被响应式化。

当 Vue 尝试将一个对象转换为响应式对象时，会首先检查这个对象是否具有 __v_skip 属性，如果存在且值为 true，则会直接跳过响应式化过程。

我们来看一个例子：

import { reactive, markRaw } from 'vue';

const rawObject = { name: 'Alice', age: 30 };
markRaw(rawObject); // 标记 rawObject 为非响应式对象

const reactiveObject = reactive({ data: rawObject });

console.log(reactiveObject.data.name); // "Alice" (访问的是原始对象，没有触发 get 拦截)

reactiveObject.data.name = 'Bob';
console.log(reactiveObject.data.name); // "Bob" (修改的是原始对象，不会触发响应式更新)

在这个例子中，我们使用 markRaw 标记了 rawObject 为非响应式对象。即使我们将 rawObject 赋值给了一个响应式对象的属性，rawObject 也不会被响应式化。因此，修改 reactiveObject.data.name 不会触发响应式更新。

什么情况下我们需要使用 markRaw 呢？

• 大型不可变数据： 如果你有一些大型的、不需要响应式更新的数据，可以使用 markRaw 标记它们，避免 Vue 响应式系统浪费资源。
• 第三方库对象： 当你使用第三方库，并且库中的对象不需要响应式化时，可以使用 markRaw 标记它们，防止 Vue 响应式系统干扰第三方库的运行。
• 避免循环依赖： 在某些复杂的场景下，可能会出现循环依赖的问题。使用 markRaw 可以打破循环依赖，避免程序崩溃。

三、toRaw 和 markRaw 的区别和联系

特性	toRaw	markRaw
作用	获取响应式对象的原始版本	标记对象为非响应式对象
影响	临时性，只在访问原始对象时生效	永久性，对象永远不会被响应式化
使用场景	临时绕过响应式系统，获取原始值进行操作或比较	避免对象被响应式化，节省资源，打破循环依赖
是否修改对象	否	是，添加 __v_skip 属性

• 联系： 它们都用于处理与非 Vue 响应式系统交互的场景，避免性能开销和无限循环。
• 区别： toRaw 只是临时性地获取原始对象，而 markRaw 则是永久性地标记对象为非响应式对象。

四、实战案例：优化 Vuex Store

假设我们有一个 Vuex Store，其中包含一个大型的、从服务器获取的数据列表。这个列表的数据量非常大，而且很少发生变化。如果我们将这个列表直接存储在 Vuex Store 中，那么 Vue 就会尝试将整个列表转换为响应式对象，这会带来很大的性能开销。

为了优化性能，我们可以使用 markRaw 标记这个列表，避免 Vue 响应式系统处理它。

import { createStore } from 'vuex';
import { markRaw } from 'vue';

export default createStore({
  state: {
    largeDataList: markRaw([]) // 标记 largeDataList 为非响应式对象
  },
  mutations: {
    setLargeDataList(state, list) {
      state.largeDataList = markRaw(list); // 确保每次更新都标记为非响应式
    }
  },
  actions: {
    async fetchLargeDataList({ commit }) {
      const response = await fetch('/api/large-data');
      const list = await response.json();
      commit('setLargeDataList', list);
    }
  },
  getters: {
    getLargeDataList: (state) => state.largeDataList
  }
});

在这个例子中，我们使用 markRaw 标记了 state.largeDataList 为非响应式对象。这样，Vue 就不会尝试将这个列表转换为响应式对象，从而节省了大量的性能开销。

五、避免无限循环

在复杂的组件关系中，如果响应式依赖形成循环，会导致无限循环更新，最终浏览器崩溃。 markRaw 可以用于打破这种循环。

例如，组件 A 依赖组件 B 的某个响应式属性，而组件 B 又依赖组件 A 的某个响应式属性。在这种情况下，修改组件 A 的属性会触发组件 B 的更新，而组件 B 的更新又会触发组件 A 的更新，从而形成无限循环。

使用 markRaw 可以打破这种循环。我们可以将组件 A 或组件 B 的某个属性标记为非响应式对象，从而阻止循环更新的发生。

六、总结

toRaw 和 markRaw 是 Vue 3 提供的两个非常有用的函数，它们可以帮助我们处理与非 Vue 响应式系统交互的场景，避免性能开销和无限循环。

• toRaw 就像是一个“解毒剂”，它可以把响应式对象“还原”成普通对象，让我们可以直接操作原始数据，而不用担心触发不必要的响应式更新。
• markRaw 就像是一个“绝缘体”，它可以标记一个对象，使其永远不会被转换为响应式对象，防止 Vue 响应式系统“触电”。

希望通过今天的讲座，大家能够更深入地理解 toRaw 和 markRaw 的作用和用法，并在实际开发中灵活运用它们，写出更高效、更健壮的 Vue 应用。

好，今天的课程就到这里，大家有什么问题吗？