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

各位靓仔靓女们，早上好/下午好/晚上好！（取决于你们刷到这篇讲座的时间啦），我是你们今天的主讲人，咱们今天来聊聊 Vue 3 源码里两个很有意思的小家伙：toRaw 和 markRaw。

讲座主题：Vue 3 响应式系统的“金钟罩”和“卸力诀”：toRaw 和 markRaw

话说这 Vue 3 的响应式系统，那是相当强大，能把你的数据变成听话的小精灵，一有风吹草动就通知页面更新。但正所谓“水能载舟，亦能覆舟”，有时候咱们并不想所有的数据都变成响应式的，或者想从响应式数据里“抽身”，这时候，toRaw 和 markRaw 就闪亮登场了。它们就像武侠小说里的“金钟罩”和“卸力诀”，保护你的数据，避免不必要的性能开销和无限循环。

第一节：响应式系统的小秘密：Proxy 和追踪

要理解 toRaw 和 markRaw，咱们先得简单回顾一下 Vue 3 响应式系统的核心：Proxy。

Vue 3 使用 Proxy 来拦截对象的操作，比如读取属性、设置属性等。当你在组件里访问响应式数据时，Proxy 就会记录下这个依赖关系，也就是把当前组件的渲染函数（或者其他依赖）添加到这个属性的依赖列表中。一旦这个属性的值发生变化，Proxy 就会通知所有依赖这个属性的组件更新。

这套机制非常巧妙，但也有一些潜在的问题：

性能开销： 创建 Proxy 和追踪依赖是需要消耗资源的。如果你的数据量很大，或者频繁地操作响应式数据，就会产生一定的性能开销。
无限循环： 如果你在响应式数据的 setter 里修改了自身，就可能会触发无限循环更新。

第二节：toRaw：卸力诀，还原真身

toRaw 的作用很简单：它能把一个响应式对象“还原”成原始对象，也就是去掉 Proxy 的外壳。就像武侠高手卸去对手的力道，把攻击化解于无形。

源码剖析：

toRaw 的源码非常简洁：

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

这段代码做了两件事：

检查 observed 对象是否已经存在 RAW_KEY 属性。 RAW_KEY 是一个 Symbol，Vue 内部用来标记原始对象的。如果一个对象已经被 markRaw 处理过，或者在创建响应式对象的时候保留了原始对象的引用，那么它就会有这个属性。
如果存在 RAW_KEY 属性，就返回对应的原始对象；否则，直接返回 observed 对象本身。 这意味着，如果传入的对象不是响应式对象，toRaw 不会做任何处理。

用法示例：

import { reactive, toRaw } from 'vue';

const original = { name: '张三', age: 30 };
const reactiveData = reactive(original);

console.log(reactiveData === original); // false，reactiveData 是一个 Proxy 对象

const rawData = toRaw(reactiveData);
console.log(rawData === original); // true，rawData 是原始对象

reactiveData.age = 31; // 修改响应式对象
console.log(original.age); // 30，原始对象的值没有改变，因为我们拿到的是原始对象的副本，而不是响应式对象的引用。
console.log(rawData.age); // 31, toRaw拿到的就是原始对象，因此会改变

应用场景：

性能优化： 当你需要对一个响应式对象进行大量操作，而这些操作不需要触发响应式更新时，可以使用 toRaw 先把对象还原成原始对象，进行操作后再重新变成响应式对象。
与非 Vue 响应式系统交互： 有时候你需要把 Vue 的响应式数据传递给一些不支持响应式的库或组件。这时，可以使用 toRaw 把数据还原成原始对象，避免出现兼容性问题。
避免无限循环： 在某些情况下，你在响应式数据的 setter 里修改了自身，可能会触发无限循环更新。使用 toRaw 可以避免这种情况。

第三节：markRaw：金钟罩，刀枪不入

markRaw 的作用是给一个对象打上标记，让 Vue 的响应式系统忽略它。就像给高手穿上金钟罩，任何攻击都无法触及。

源码剖析：

export function markRaw<T extends object>(value: T): T {
  def(value, RAW_KEY, value);
  return value
}

这段代码也很简单：

使用 def 函数给 value 对象添加一个不可枚举的 RAW_KEY 属性，并将 value 对象本身作为属性值。 def 函数其实就是 Object.defineProperty 的一个封装，用来定义不可枚举的属性。
返回 value 对象本身。

用法示例：

import { reactive, markRaw } from 'vue';

const original = { name: '张三', age: 30 };
markRaw(original); // 给 original 对象打上标记

const reactiveData = reactive(original);

console.log(reactiveData === original); // true，reactiveData 和 original 是同一个对象，但 original 不会被响应式追踪

reactiveData.age = 31; // 修改响应式对象
console.log(original.age); // 31，因为 reactiveData 和 original 是同一个对象，所以 original 的值也会改变
//但是 reactiveData.age 被修改，不会触发响应式的更新

应用场景：

大型不可变数据： 当你有一些大型的不可变数据，比如第三方库返回的数据，或者从服务器获取的静态配置数据，可以使用 markRaw 避免 Vue 尝试将它们变成响应式对象，从而提高性能。
Vue 组件实例： Vue 组件实例本身就是一个对象，但我们通常不希望它变成响应式对象。Vue 内部会使用 markRaw 来标记组件实例，避免不必要的响应式追踪。
避免响应式劫持： 有些对象可能包含一些特殊的属性，比如 DOM 元素。如果 Vue 尝试将这些属性变成响应式的，可能会导致一些意想不到的问题。使用 markRaw 可以避免这种情况。

第四节：toRaw 和 markRaw 的区别与联系

特性	`toRaw`	`markRaw`
作用	将响应式对象还原成原始对象	给对象打上标记，阻止其变成响应式对象
影响	影响后续对原始对象的修改是否会触发响应式更新	影响对象是否会被响应式系统追踪
使用时机	需要访问原始对象，避免响应式追踪时	确定对象不需要变成响应式对象时
是否修改原始对象	否	是，会给原始对象添加 `RAW_KEY` 属性
对象类型	仅对响应式对象有效	对任何对象都有效

联系：

toRaw 和 markRaw 都是为了优化性能和避免不必要的响应式追踪。
toRaw 可以用于访问 markRaw 标记过的对象的原始值，但 markRaw 标记过的对象即使被 reactive 包裹，也不会变成响应式对象。

举个栗子：

假设你有一个大型的配置对象，从服务器获取：

const config = {
  // ... 很多配置项
  apiEndpoint: 'https://example.com/api',
  theme: {
    color: 'blue',
    fontSize: '16px',
  },
  // ...
};

// 1. 使用 markRaw 标记 config 对象，避免 Vue 尝试将它变成响应式对象
markRaw(config);

// 2. 在组件中使用 config 对象
import { reactive, toRef } from 'vue';

export default {
  setup() {
    // 3. 将 config 对象的部分属性变成响应式数据
    const theme = reactive(config.theme);

    return {
      apiEndpoint: config.apiEndpoint, // 直接访问原始属性，无需响应式追踪
      themeColor: toRef(theme, 'color'), // 将 theme.color 变成响应式数据，当 color 改变时，组件会更新
    };
  },
  template: `
    <div>
      <p>API Endpoint: {{ apiEndpoint }}</p>
      <p>Theme Color: {{ themeColor }}</p>
    </div>
  `,
};

在这个例子中，我们使用 markRaw 标记了 config 对象，避免 Vue 尝试将整个配置对象变成响应式对象。然后，我们使用 toRef 将 config.theme.color 变成响应式数据，只有当主题颜色发生改变时，组件才会更新。这样既可以避免不必要的性能开销，又可以实现响应式更新。

第五节：避坑指南：注意事项和最佳实践

不要滥用 markRaw： 只有在确定对象不需要变成响应式对象时，才使用 markRaw。过度使用 markRaw 可能会导致组件无法正常更新。
小心 toRaw 返回的对象： toRaw 返回的是原始对象的引用，如果你修改了原始对象，可能会导致一些意想不到的问题。
与计算属性和侦听器配合使用： 可以使用 toRaw 在计算属性和侦听器中访问原始对象，避免不必要的依赖追踪。
Vue Devtools 调试： Vue Devtools 可以帮助你查看哪些对象被 markRaw 标记过，以及哪些数据是响应式的，方便你进行调试和性能优化。

第六节：总结：掌握 “金钟罩” 和 “卸力诀”，玩转 Vue 3 响应式系统

toRaw 和 markRaw 是 Vue 3 响应式系统中两个非常实用的小工具。它们可以帮助你优化性能，避免不必要的响应式追踪，以及与非 Vue 响应式系统进行交互。掌握了这两个工具，你就可以更加灵活地使用 Vue 3 的响应式系统，写出更加高效、稳定的代码。

记住，toRaw 是“卸力诀”，把响应式对象还原成原始对象；markRaw 是“金钟罩”，保护对象不被响应式系统追踪。合理运用它们，就能在 Vue 的世界里游刃有余，成为真正的武林高手！

好了，今天的讲座就到这里。希望大家有所收获，下次再见！ (挥手)

发表回复 取消回复

发表回复取消回复