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

各位观众老爷们，大家好！今天给大家带来一堂精彩的 Vue 3 源码解剖课，主题是 toRaw 和 markRaw 这两位看似低调，实则身怀绝技的幕后英雄。

准备好了吗？咱们这就开始！

开场白：响应式世界的烦恼

在 Vue 的响应式世界里，一切都是那么美好，数据变化，视图自动更新，感觉就像拥有了魔法。但是，魔法世界也有它的局限性。想象一下，你辛辛苦苦用 Vue 管理着一大堆数据，突然有一天，你需要把其中一部分数据交给一个非 Vue 的外部库处理，比如一个超级古老的 jQuery 插件，或者一个只认普通 JavaScript 对象的第三方组件。

这时候问题就来了：

性能开销： 如果你直接把响应式对象传过去，外部库可能会尝试修改这些对象，触发 Vue 的响应式系统，导致不必要的更新，白白浪费性能。而且，外部库可能并不理解 Vue 的响应式机制，结果可想而知，轻则报错，重则程序崩溃。
无限循环： 更可怕的是，某些外部操作可能会反过来影响 Vue 的响应式对象，导致无限循环更新，让你的浏览器直接卡死。

toRaw 和 markRaw 就是用来解决这些问题的，它们就像是两把锋利的宝剑，帮助我们斩断响应式世界的束缚，让我们可以自由地与非 Vue 的世界交互。

第一把宝剑：toRaw – 还我本来面目！

toRaw 的作用非常简单粗暴，就是把一个响应式对象（或 Proxy 对象）还原成它原本的 JavaScript 对象。它会递归地剥离所有响应式代理，直到得到最原始的数据。

源码剖析：

// packages/shared/src/index.ts
export const toRaw = <T>(observed: T): T => {
  const raw = observed && (observed as Target)[ReactiveFlags.RAW]
  return raw ? toRaw(raw) : observed
}

这段代码简洁得令人发指，但却蕴含着深刻的道理：

类型推断： 使用泛型 <T> 确保了类型安全，toRaw 返回值的类型与传入值的类型相同。
ReactiveFlags.RAW： 这个 ReactiveFlags.RAW 是一个 Symbol 类型的 key，它被用来存储原始对象。当一个对象被变成响应式对象时，Vue 会把原始对象存储到响应式代理的 __v_raw 属性中（__v_raw 属性实际上就是用 ReactiveFlags.RAW 作为 key）。
递归剥离： toRaw 首先检查传入的对象是否是响应式对象，如果是，就通过 ReactiveFlags.RAW 获取原始对象，然后递归调用 toRaw，直到找到最原始的对象为止。如果传入的不是响应式对象，就直接返回。

简单举例：

import { reactive, toRaw } from 'vue';

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

console.log(reactiveObject === originalObject); // false，reactiveObject 是一个 Proxy 对象
console.log(toRaw(reactiveObject) === originalObject); // true，toRaw 返回了原始对象

在这个例子中，reactiveObject 是一个响应式对象，它不是 originalObject 本身，而是一个代理对象。但是，toRaw(reactiveObject) 返回了 originalObject，这就是 toRaw 的威力。

应用场景：

与外部库交互： 当你需要把 Vue 管理的数据传递给一个不兼容响应式的外部库时，可以使用 toRaw 把数据转换成普通 JavaScript 对象，避免出现问题。
性能优化： 在某些情况下，你可能需要直接操作原始数据，避免触发不必要的更新。这时，toRaw 可以让你绕过响应式系统，直接访问原始数据。
深度比较： 如果你需要比较两个响应式对象是否完全相等，不能直接使用 ===，因为它们是不同的代理对象。可以使用 toRaw 把它们转换成原始对象，然后进行比较。

需要注意的点：

toRaw 是浅层的，它只会剥离最外层的响应式代理，不会递归地剥离嵌套对象的响应式代理。
修改 toRaw 返回的原始对象会影响响应式对象，反之亦然。因为它们指向的是同一个内存地址。

第二把宝剑：markRaw – 此物与响应式绝缘！

markRaw 的作用与 toRaw 略有不同。它不是把响应式对象还原成原始对象，而是给一个对象打上一个标记，告诉 Vue 的响应式系统：“这个对象别碰，就让它保持原样，不要把它变成响应式对象！”

源码剖析：

// packages/runtime-core/src/reactive.ts
export function markRaw<T extends object>(value: T): T {
  def(value, ReactiveFlags.SKIP, true)
  return value
}

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

这段代码同样非常简洁：

ReactiveFlags.SKIP： markRaw 使用 ReactiveFlags.SKIP 这个 Symbol 类型的 key 在对象上定义了一个不可枚举的属性，值为 true。
def 函数： def 函数只是一个简单的辅助函数，用来在对象上定义属性，并且设置 configurable: true 和 enumerable: false，这意味着这个属性可以被删除，但不会被枚举。

简单举例：

import { reactive, markRaw } from 'vue';

const nonReactiveObject = { id: 1, name: '李四' };
markRaw(nonReactiveObject);

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

console.log(reactiveObject.data === nonReactiveObject); // true，reactiveObject.data 指向的是同一个对象
reactiveObject.data.name = '王五'; // 修改 nonReactiveObject
console.log(reactiveObject.data.name); // 王五，修改生效

在这个例子中，nonReactiveObject 被 markRaw 标记后，即使它被包含在响应式对象 reactiveObject 中，也不会变成响应式对象。修改 nonReactiveObject 会直接影响 reactiveObject.data，因为它们指向的是同一个对象。

应用场景：

大型不可变对象： 如果你有一个非常大的对象，而且这个对象永远不会被修改，那么可以使用 markRaw 把它标记为非响应式，避免 Vue 尝试把它变成响应式对象，节省内存和性能。
第三方库对象： 有些第三方库会返回一些特殊的对象，这些对象可能不适合被 Vue 的响应式系统管理。可以使用 markRaw 避免出现问题。
优化性能： 在某些情况下，你可能需要明确地控制哪些数据需要被追踪，哪些数据不需要被追踪。markRaw 可以让你更精细地控制响应式系统的行为。

需要注意的点：

markRaw 是永久性的，一旦一个对象被标记为非响应式，就无法再把它变成响应式对象。
markRaw 是浅层的，它只会阻止 Vue 把当前对象变成响应式对象，不会递归地阻止嵌套对象的响应式转换。

两把宝剑的比较：

为了更好地理解 toRaw 和 markRaw 的区别，我们用一张表格来总结一下：

特性	`toRaw`	`markRaw`
作用	还原响应式对象为原始对象	标记对象为非响应式
是否改变对象	不改变原始对象，返回原始对象的引用	修改原始对象，添加标记属性
影响范围	只影响当前对象，不影响嵌套对象	只影响当前对象，不影响嵌套对象
使用场景	与外部库交互，性能优化，深度比较	大型不可变对象，第三方库对象，性能优化
是否可逆	是，原始对象仍然存在，可以再次变成响应式对象	否，一旦标记，永久生效

一个更复杂的例子：避免无限循环

假设我们有一个组件，需要从一个外部 API 获取数据，并将数据渲染到页面上。但是，这个 API 返回的数据包含一些循环引用的对象，如果直接把这些数据变成响应式对象，就会导致无限循环。

import { reactive, toRaw, markRaw, onMounted } from 'vue';

export default {
  setup() {
    const data = reactive({});

    onMounted(async () => {
      const apiData = await fetchApiData(); // 假设 fetchApiData 返回包含循环引用的数据
      // 避免循环引用导致的问题
      data.value = markRaw(apiData);
    });

    return {
      data
    };
  },
  template: `
    <div>{{ data }}</div>
  `
};

在这个例子中，我们使用 markRaw 把 API 返回的数据标记为非响应式，避免了循环引用导致的问题。虽然 data 本身是响应式的，但是它的 value 属性指向的是一个非响应式对象，所以 Vue 不会尝试追踪这个对象的修改。

总结：响应式世界的最佳实践

toRaw 和 markRaw 是 Vue 3 中非常重要的两个工具，它们可以帮助我们更好地控制响应式系统的行为，避免出现性能问题和无限循环。

使用 toRaw： 当你需要把响应式对象传递给一个不兼容响应式的外部库时，或者需要直接操作原始数据时。
使用 markRaw： 当你有一个大型的不可变对象，或者需要明确地控制哪些数据需要被追踪时。

记住，响应式系统虽然强大，但也需要我们小心使用。合理地使用 toRaw 和 markRaw，可以让我们的 Vue 应用更加健壮和高效。

结束语：响应式世界，无限可能

好了，今天的 Vue 3 源码解剖课就到这里。希望通过今天的讲解，大家能够对 toRaw 和 markRaw 有更深入的理解，并在实际开发中灵活运用它们。

Vue 的响应式世界充满了无限可能，只要我们掌握了正确的工具和方法，就能创造出更加精彩的应用！

感谢大家的观看，我们下期再见！

发表回复 取消回复

发表回复取消回复