阐述 Vue 3 源码中 `toRaw` 和 `markRaw` 的设计意图，以及它们在与非 Vue 响应式系统交互时的作用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 3 源码解密：`toRaw` 和 `markRaw` – 当响应式遇到“老实人”

大家好，我是你们的老朋友，今天咱们不聊八卦，来聊聊 Vue 3 源码里的两个小家伙，toRaw 和 markRaw。别看它们名字平平无奇，作用可不小，尤其是在 Vue 的响应式世界里，它们就像是两个“翻译官”，专门负责和那些“老实人”（非响应式对象）打交道。

响应式世界与“老实人”

在开始“翻译”之前，咱们先搞清楚一个概念：Vue 的响应式系统。简单来说，就是当你修改了 Vue 管理的数据时，页面会自动更新，不用你手动刷新。这种魔法的背后，是 Vue 通过 Proxy 对数据进行代理，监听数据的变化。

但是，问题来了。有些数据，我们并不希望被 Vue 的响应式系统“污染”。比如，从外部库获取的数据，或者一些性能敏感的对象，我们只想原封不动地使用，不想让 Vue 去监听它们的变化。这时候，toRaw 和 markRaw 就派上用场了。

`toRaw`：响应式对象的“卸妆水”

toRaw 的作用就像是响应式对象的“卸妆水”，它可以把一个响应式对象还原成它原始的、非响应式的版本。

// 假设我们有一个响应式对象
import { reactive, toRaw } from 'vue';

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

console.log('响应式对象:', reactiveObj); // Proxy {name: '张三', age: 18}

// 使用 toRaw 还原成原始对象
const rawObj = toRaw(reactiveObj);

console.log('原始对象:', rawObj); // {name: '张三', age: 18}

// 修改原始对象，响应式对象不会更新
rawObj.name = '李四';

console.log('修改后的原始对象:', rawObj); // {name: '李四', age: 18}
console.log('响应式对象:', reactiveObj); // Proxy {name: '张三', age: 18}

从上面的例子可以看出，toRaw 可以把响应式对象 reactiveObj 还原成原始对象 rawObj。修改 rawObj 不会触发 reactiveObj 的更新，因为它们已经完全脱离了响应式关系。

源码剖析（简化版）：

toRaw 的源码其实很简单，它会从响应式对象中取出原始对象，并返回。在 Vue 3 中，每个响应式对象都会被 Vue 内部维护一个 __v_raw 属性，指向它的原始对象。 toRaw 就是通过访问这个属性来获取原始对象的。

// toRaw 的简化版实现
function toRaw(observed: any) {
  const raw = observed && observed["__v_raw"];
  return raw ? raw : observed;
}

应用场景：

性能优化： 对于一些不需要响应式更新的对象，使用 toRaw 可以避免不必要的性能开销。比如，在一些高频更新的场景下，如果某个对象不需要响应式更新，就可以使用 toRaw 获取它的原始对象，避免触发不必要的更新。
与第三方库集成： 有些第三方库可能不支持 Vue 的响应式对象，需要传入原始对象。这时候，就可以使用 toRaw 将响应式对象转换成原始对象，再传递给第三方库。
调试： 在调试过程中，可以使用 toRaw 查看响应式对象的原始值，方便排查问题。

`markRaw`：给对象贴上“免检标签”

markRaw 的作用就像是给对象贴上一个“免检标签”，告诉 Vue 的响应式系统：“这个对象，我罩着了，你别动它！” 也就是说，markRaw 可以阻止 Vue 将对象转换成响应式对象。

// 假设我们有一个普通对象
import { reactive, markRaw } from 'vue';

const normalObj = {
  name: '王五',
  age: 20,
};

// 使用 markRaw 标记对象
markRaw(normalObj);

// 将对象转换成响应式对象
const reactiveObj = reactive(normalObj);

console.log('响应式对象:', reactiveObj); // Proxy {name: '王五', age: 20}

// 修改响应式对象，原始对象不会更新
reactiveObj.name = '赵六';

console.log('修改后的响应式对象:', reactiveObj); // Proxy {name: '赵六', age: 20}
console.log('原始对象:', normalObj); // {name: '王五', age: 20}

从上面的例子可以看出，即使我们使用 reactive 将 normalObj 转换成响应式对象 reactiveObj，修改 reactiveObj 也不会影响 normalObj，因为 normalObj 已经被 markRaw 标记为非响应式对象了。

源码剖析（简化版）：

markRaw 的源码也很简单，它会在对象上添加一个 __v_skip 属性，并将其设置为 true。 Vue 在创建响应式对象时，会检查对象的 __v_skip 属性，如果存在且为 true，则跳过该对象的响应式转换。

// markRaw 的简化版实现
function markRaw(value: any) {
  if (isObject(value)) {
    def(value, "__v_skip", true);
  }
  return value;
}

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

function isObject(val: any): val is object {
  return val !== null && typeof val === 'object';
}

应用场景：

大型不可变数据： 对于一些大型的、不可变的数据，比如从后端获取的配置信息，可以使用 markRaw 标记它们，避免 Vue 将它们转换成响应式对象，提高性能。
第三方库对象： 有些第三方库返回的对象，Vue 无法正确地进行响应式转换，可以使用 markRaw 标记它们，避免出现错误。
避免不必要的响应式更新： 对于一些不需要响应式更新的对象，可以使用 markRaw 标记它们，避免触发不必要的更新。比如，在一些自定义组件中，如果某个对象只是用于内部计算，不需要响应式更新，就可以使用 markRaw 标记它。

`toRaw` vs. `markRaw`：异同点大PK

特性	`toRaw`	`markRaw`
作用	将响应式对象还原成原始对象。	阻止 Vue 将对象转换成响应式对象。
使用对象	响应式对象。	任何对象。
影响	不会影响原始对象，只是返回原始对象的引用。	会直接修改原始对象，添加 `__v_skip` 属性。
目的	获取原始对象，方便与非响应式系统交互，或者进行性能优化。	阻止对象被转换成响应式对象，避免不必要的响应式更新，或者与第三方库集成。
使用场景	需要获取响应式对象的原始值，或者将响应式对象传递给不支持响应式的第三方库。	需要阻止对象被转换成响应式对象，比如大型不可变数据、第三方库对象、或者不需要响应式更新的对象。
示例	`const rawObj = toRaw(reactiveObj);`	`markRaw(normalObj);`
副作用	无。	会修改原始对象，添加 `__v_skip` 属性，可能影响对象的序列化和反序列化。
递归性	toRaw 会递归地将所有嵌套的响应式对象都转换为原始对象，直到遇到非响应式对象为止。	markRaw 只会标记当前对象，不会递归地标记嵌套的对象。如果需要递归地标记嵌套的对象，需要手动遍历对象，并对每个对象都调用 markRaw。

总结：

toRaw 是“卸妆”，还原已经响应式的对象。
markRaw 是“贴标签”，阻止对象被响应式化。

示例：与第三方图表库集成

假设我们使用一个第三方图表库，它需要传入原始的 JavaScript 对象作为数据源。如果我们的数据是响应式的，就需要使用 toRaw 将其转换成原始对象，再传递给图表库。

<template>
  <div ref="chartContainer"></div>
</template>

<script setup>
import { ref, reactive, onMounted, toRaw } from 'vue';
import * as echarts from 'echarts'; // 假设我们使用 ECharts

const chartContainer = ref(null);
const chartInstance = ref(null);

// 响应式数据
const chartData = reactive({
  xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  series: [23, 24, 18, 25, 27, 28, 22],
});

onMounted(() => {
  // 初始化 ECharts 实例
  chartInstance.value = echarts.init(chartContainer.value);

  // 配置项
  const options = {
    xAxis: {
      type: 'category',
      data: toRaw(chartData.xAxis), // 使用 toRaw 转换成原始数组
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: toRaw(chartData.series), // 使用 toRaw 转换成原始数组
        type: 'line',
      },
    ],
  };

  // 设置配置项
  chartInstance.value.setOption(options);
});
</script>

在这个例子中，我们使用 toRaw 将 chartData.xAxis 和 chartData.series 转换成原始数组，再传递给 ECharts。这样可以避免 ECharts 尝试监听响应式数据的变化，提高性能。

示例：避免大型配置对象被响应式化

假设我们从后端获取了一个大型的配置对象，这个对象在应用运行期间不会发生变化，不需要进行响应式更新。为了提高性能，可以使用 markRaw 标记这个对象，避免 Vue 将其转换成响应式对象。

import { markRaw } from 'vue';

// 从后端获取的配置对象
const config = {
  appName: 'My App',
  apiUrl: 'https://api.example.com',
  theme: 'dark',
  // ... 更多配置项
};

// 使用 markRaw 标记配置对象
markRaw(config);

// 在 Vue 组件中使用配置对象
export default {
  setup() {
    console.log(config.appName); // 可以直接访问配置项

    return {
      config,
    };
  },
};

在这个例子中，我们使用 markRaw 标记了 config 对象，阻止 Vue 将其转换成响应式对象。这样可以避免不必要的性能开销，提高应用的运行效率。

注意事项

markRaw 会直接修改原始对象，添加 __v_skip 属性。这可能会影响对象的序列化和反序列化，需要注意。
markRaw 只会标记当前对象，不会递归地标记嵌套的对象。如果需要递归地标记嵌套的对象，需要手动遍历对象，并对每个对象都调用 markRaw。
过度使用 markRaw 可能会导致 Vue 的响应式系统失效，需要谨慎使用。

总结

toRaw 和 markRaw 是 Vue 3 中两个非常有用的工具函数，它们可以帮助我们更好地与非 Vue 响应式系统交互，提高应用的性能。理解它们的设计意图和使用场景，可以让我们写出更高效、更健壮的 Vue 应用。希望今天的讲解对大家有所帮助，下次再见！

Vue 3 源码解密：toRaw 和 markRaw – 当响应式遇到“老实人”

响应式世界与“老实人”

toRaw：响应式对象的“卸妆水”

markRaw：给对象贴上“免检标签”

toRaw vs. markRaw：异同点大PK