Vue 3源码深度解析之：`toRaw`和`markRaw`：如何获取原始对象，以及它们的用途。

各位观众老爷，大家好！今天咱们不聊风花雪月，只谈Vue 3源码里的两位“老实人”——toRaw和markRaw。这两个家伙，一个负责扒掉响应式数据的“伪装”，露出原始对象的真面目；另一个则给对象贴上“免死金牌”，让它永远逃离响应式的魔爪。

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

第一幕：响应式世界的“楚门的世界”

要理解toRaw和markRaw的意义，首先得明白Vue 3的响应式系统。简单来说，Vue 3通过Proxy代理对象，拦截对数据的读取和修改，从而实现视图的自动更新。就像楚门的世界，你看到的一切都是被精心设计的，目的是为了让你相信这就是真实世界。

const original = { count: 0 };
const reactiveObj = reactive(original);

console.log(original === reactiveObj); // false，reactiveObj是Proxy代理后的对象
console.log(reactiveObj.count); // 0，读取数据会触发get拦截
reactiveObj.count++; // 修改数据会触发set拦截
console.log(original.count); // 0，original对象的值并没有改变

在这个例子中，reactiveObj是original的响应式版本，它并不是original本身。对reactiveObj的操作会触发响应式系统的更新机制，但original依然保持不变。

第二幕：toRaw：揭开响应式数据的面纱

有时候，我们可能需要访问原始对象，而不是响应式代理对象。比如，在一些性能敏感的场景下，直接操作原始对象可以避免不必要的Proxy拦截。这时候，toRaw就派上用场了。

toRaw的作用很简单：返回响应式代理对象的原始对象。它就像一个“脱壳机”，把响应式对象的外壳剥掉，露出里面的“内核”。

import { reactive, toRaw } from 'vue';

const original = { count: 0 };
const reactiveObj = reactive(original);

const rawObj = toRaw(reactiveObj);

console.log(rawObj === original); // true，rawObj就是原始对象original
console.log(rawObj.count); // 0
rawObj.count++;
console.log(original.count); // 1，直接修改原始对象的值
console.log(reactiveObj.count); // 1，响应式对象的值也同步更新，因为它们指向同一个对象

可以看到，toRaw(reactiveObj)返回的就是原始对象original。对rawObj的修改，会直接影响original，而由于reactiveObj是original的响应式版本，所以reactiveObj也会同步更新。

toRaw源码剖析（简化版）：

// 假设已经定义了hasOwn和isObject等工具函数

const toRaw = (observed) => {
  const raw = observed && observed["__v_raw"]; // 检查对象是否已经有__v_raw属性

  return raw ? raw : observed; // 如果有，直接返回；否则，返回原始对象
};

// 在reactive函数中，会将原始对象与代理对象关联起来
// 简化的reactive函数示例：
function reactive(target) {
  if (!isObject(target)) {
    return target;
  }

  if (hasOwn(target, "__v_raw")) {
    return target; // 避免重复代理
  }

  const existingProxy = target["__v_proxy"]; // 如果已经有代理，直接返回
  if (existingProxy) {
    return existingProxy;
  }

  const proxy = new Proxy(target, {
    // ... get和set的handler
  });

  target["__v_raw"] = target; // 关键一步：将原始对象存入__v_raw属性
  target["__v_proxy"] = proxy; // 将代理对象存入__v_proxy属性

  return proxy;
}

toRaw的应用场景：

• 性能优化： 避免不必要的Proxy拦截，直接操作原始对象。
• 与非响应式库集成： 将响应式数据转换为原始数据，方便与第三方库集成。
• 调试： 查看响应式对象的原始值。

第三幕：markRaw：给对象贴上“免死金牌”

markRaw的作用与toRaw相反。toRaw是从响应式对象获取原始对象，而markRaw是阻止对象被转换为响应式对象。它就像给对象贴上了一张“免死金牌”，让它永远逃离响应式系统的魔爪。

import { reactive, markRaw } from 'vue';

const obj = { name: '张三', age: 20 };
markRaw(obj); // 给obj贴上“免死金牌”

const reactiveObj = reactive(obj);

console.log(reactiveObj === obj); // true，reactiveObj就是obj本身，没有被Proxy代理
reactiveObj.age++; // 修改age不会触发响应式更新
console.log(obj.age); // 21

在这个例子中，markRaw(obj)阻止了obj被转换为响应式对象。所以，reactive(obj)返回的就是obj本身，而不是Proxy代理后的对象。对reactiveObj.age的修改，不会触发响应式更新。

markRaw源码剖析（简化版）：

const markRaw = (value) => {
  if (isObject(value)) {
    def(value, "__v_skip", true); // 给对象添加__v_skip属性，值为true
  }
  return value;
};

// def函数，用于定义不可枚举的属性：
function def(obj, key, value) {
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: false,
    value,
  });
}

// reactive函数中，会检查__v_skip属性：
function reactive(target) {
  if (!isObject(target)) {
    return target;
  }

  if (hasOwn(target, "__v_raw")) {
    return target; // 避免重复代理
  }

  if (target["__v_skip"]) {
    return target; // 关键一步：如果对象有__v_skip属性，直接返回，不进行代理
  }

  const existingProxy = target["__v_proxy"]; // 如果已经有代理，直接返回
  if (existingProxy) {
    return existingProxy;
  }

  const proxy = new Proxy(target, {
    // ... get和set的handler
  });

  target["__v_raw"] = target; // 关键一步：将原始对象存入__v_raw属性
  target["__v_proxy"] = proxy; // 将代理对象存入__v_proxy属性

  return proxy;
}

markRaw的应用场景：

• 大型不可变数据： 对于大型且不需要响应式更新的数据，使用markRaw可以避免不必要的性能开销。例如，一些第三方库返回的数据，或者一些配置对象。
• Vue组件实例： 组件实例本身不需要是响应式的，所以Vue内部会使用markRaw来标记组件实例。
• 避免循环依赖： 在某些情况下，响应式对象之间可能存在循环依赖，导致性能问题。使用markRaw可以打破这种循环依赖。

第四幕：toRaw和markRaw的对比

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

特性	toRaw	markRaw
作用	获取响应式对象的原始对象	阻止对象被转换为响应式对象
参数	响应式对象	原始对象
返回值	原始对象	原始对象
影响	不影响原始对象的状态	影响后续的响应式转换
使用场景	需要访问原始数据，或与非响应式库集成	大型不可变数据，避免不必要的响应式开销
底层实现	通过查找对象的__v_raw属性实现	通过给对象添加__v_skip属性实现

第五幕：实战演练

为了让大家更深入地理解toRaw和markRaw的应用，我们来看几个实际的例子。

例子1：优化大型列表的渲染

假设我们有一个大型列表，其中每个item包含很多属性，但我们只需要在页面上展示其中的几个属性。如果直接使用响应式数据，会导致每次更新都触发整个item的重新渲染，影响性能。

<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue';

const largeData = Array.from({ length: 1000 }, (_, i) => ({
  id: i,
  name: `Product ${i}`,
  price: Math.random() * 100,
  description: `This is a detailed description of product ${i}`,
  imageUrl: `https://example.com/image/${i}.jpg`,
  // ... 更多属性
}));

// 方案一：直接使用响应式数据
const list = reactive(largeData);

// 方案二：使用toRaw，只将需要展示的属性转换为响应式数据
// const list = largeData.map(item => ({
//   id: item.id,
//   name: item.name,
//   price: item.price,
// }));
// const reactiveList = reactive(list); // 只需要展示的属性进行响应式处理

// 方案三：使用toRaw，只将需要展示的属性转换为响应式数据, 并在模板中使用 toRaw 获取原始对象
// const list = reactive(largeData);

// const getItem = (item) => {
//   return {
//     id: toRaw(item).id,
//     name: toRaw(item).name,
//     price: toRaw(item).price,
//   };
// };

// 方案四：使用 toRaw 将整个 list 转换为原始对象
// const list = reactive(largeData);
// const rawList = toRaw(list);
// console.log("rawList", rawList);

// 方案五：在组件外部处理数据，只将需要展示的属性转换为响应式数据。
// const rawList = largeData.map(item => ({
//     id: item.id,
//     name: item.name,
//     price: item.price
//   }));

// const list = reactive(rawList);
// console.log("list", list);

// 方案六：使用 markRaw 标记不需要响应式的数据
// const rawList = largeData.map(item => {
//   item.description = markRaw(item.description);
//   item.imageUrl = markRaw(item.imageUrl);
//   return item;
// });
// const list = reactive(rawList);

</script>

在这个例子中，我们可以使用toRaw将largeData中的每个item的description和imageUrl属性转换为原始数据，只对id、name和price进行响应式处理，从而提高渲染性能。

例子2：与第三方库集成

假设我们需要使用一个第三方库来处理数据，但这个库只接受原始对象作为参数。我们可以使用toRaw将响应式数据转换为原始数据，传递给第三方库。

import { reactive, toRaw } from 'vue';
import someThirdPartyLibrary from './some-third-party-library';

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

// 将响应式数据转换为原始数据，传递给第三方库
someThirdPartyLibrary.processData(toRaw(reactiveData));

例子3：避免循环依赖

import { reactive, markRaw } from 'vue';

const a = reactive({});
const b = reactive({});

// 尝试创建循环依赖
a.b = b;
b.a = a; // 这样会导致性能问题

// 使用markRaw打破循环依赖
const a = reactive({});
const b = reactive({});

a.b = b;
b.a = markRaw(a); // 标记a为非响应式对象，打破循环依赖

第六幕：总结

toRaw和markRaw是Vue 3响应式系统中的两个重要工具。toRaw用于获取响应式对象的原始对象，方便我们直接操作数据或与非响应式库集成；markRaw用于阻止对象被转换为响应式对象，避免不必要的性能开销。

掌握这两个工具，可以帮助我们更好地理解Vue 3的响应式系统，并编写出更高效的Vue应用。

好了，今天的讲座就到这里。希望大家有所收获！如果有什么问题，欢迎随时提问。 下次再见！