分析 Vue 3 源码中 `toRaw` 和 `markRaw` 的设计意图，以及它们在与非 Vue 响应式系统交互时的作用。

大家好！今天来聊聊 Vue 3 里两个挺酷的小家伙：toRaw 和 markRaw。

咱们平时用 Vue，享受着数据驱动视图的丝滑体验，这背后离不开 Vue 的响应式系统。但是，有时候我们也会遇到一些“不听话”的数据，比如第三方库返回的对象，或者一些需要性能优化的场景，这时候 toRaw 和 markRaw 就派上用场了。

今天，咱们就来扒一扒这两个 API 的设计意图，以及它们在和非 Vue 响应式系统“眉来眼去”的时候，都扮演着什么角色。

1. 响应式系统的“爱恨情仇”

要理解 toRaw 和 markRaw，首先得了解 Vue 的响应式系统。简单来说，Vue 会“劫持”你的数据对象（通过 Proxy），当数据发生变化时，它会通知所有依赖这个数据的组件，让它们重新渲染。

这就像你家的猫，只要风吹草动，它就会喵喵叫，提醒你注意。响应式系统就是 Vue 里的“猫”，数据就是“风吹草动”，组件就是“你”。

但是，这只“猫”也不是万能的。有时候，你并不希望它管太多，比如：

• 性能优化： 有些数据变化频率很高，但并不需要立即更新视图，过度响应反而会影响性能。
• 第三方库： 有些第三方库返回的对象，你只想原封不动地使用，不想让 Vue 的响应式系统“染指”。
• 兼容性： 有些老代码或者第三方库，可能和 Vue 的响应式系统存在冲突。

这时候，你就需要 toRaw 和 markRaw 这两个工具来“驯服”这只“猫”，让它别乱叫。

2. toRaw：从“响应式”到“原始”的时光机

toRaw 的作用很简单：把一个响应式对象还原成原始对象。

想象一下，你有一个被 Vue 响应式系统“改造”过的对象 reactiveData：

import { reactive, toRaw } from 'vue';

const reactiveData = reactive({
  name: 'Vue',
  version: 3
});

console.log(reactiveData); // Proxy {…}

const rawData = toRaw(reactiveData);

console.log(rawData); // {name: 'Vue', version: 3}

rawData.name = 'React';

console.log(rawData.name); // React
console.log(reactiveData.name); // Vue  <-- 响应式对象没有改变

可以看到，toRaw(reactiveData) 返回了一个新的对象 rawData，这个对象不再是响应式的。修改 rawData 的属性，不会触发 reactiveData 的更新，也不会触发组件的重新渲染。

toRaw 的设计意图：

• 访问原始数据： 有时候，你需要访问响应式对象的原始数据，比如进行一些比较操作，或者传递给一些不兼容响应式系统的 API。
• 性能优化： 在某些情况下，你可能只需要读取数据，而不需要响应式更新，这时候可以使用 toRaw 来避免不必要的性能开销。
• 调试： 方便你查看响应式对象内部的原始数据，帮助你调试问题。

使用场景举例：

假设你有一个复杂的表格组件，需要对表格数据进行排序。排序算法可能会修改表格数据，但你并不希望每次排序都触发组件的重新渲染。这时候，你可以使用 toRaw 来获取表格数据的原始副本，然后对副本进行排序：

<template>
  <table>
    <thead>
      <tr>
        <th @click="sortBy('name')">Name</th>
        <th @click="sortBy('version')">Version</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in sortedData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.version }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

const data = reactive([
  { id: 1, name: 'Vue', version: 3 },
  { id: 2, name: 'React', version: 18 },
  { id: 3, name: 'Angular', version: 13 }
]);

const sortKey = reactive({
  key: null,
  order: 'asc'
});

const sortedData = computed(() => {
  const rawData = toRaw(data); // 获取原始数据副本
  if (!sortKey.key) {
    return rawData;
  }

  const sorted = [...rawData].sort((a, b) => { // 对副本进行排序
    const valueA = a[sortKey.key];
    const valueB = b[sortKey.key];

    if (valueA < valueB) {
      return sortKey.order === 'asc' ? -1 : 1;
    }
    if (valueA > valueB) {
      return sortKey.order === 'asc' ? 1 : -1;
    }
    return 0;
  });

  return sorted;
});

const sortBy = (key) => {
  if (sortKey.key === key) {
    sortKey.order = sortKey.order === 'asc' ? 'desc' : 'asc';
  } else {
    sortKey.key = key;
    sortKey.order = 'asc';
  }
};
</script>

在这个例子中，toRaw(data) 返回了 data 的原始数组副本，sortedData 计算属性对这个副本进行排序，避免了每次排序都触发 data 的更新，从而提高了性能。

注意事项：

• toRaw 只会返回最外层对象的原始对象，如果对象的属性也是响应式对象，你需要递归地调用 toRaw。
• toRaw 返回的是一个原始对象的引用，而不是一个全新的对象。这意味着，如果你修改了原始对象，响应式对象也会受到影响（但反过来不行）。
• toRaw 对已经不是响应式对象的对象调用，会直接返回该对象。

3. markRaw：给数据贴上“免死金牌”

markRaw 的作用是：标记一个对象为“非响应式”。

一旦你用 markRaw 标记了一个对象，Vue 的响应式系统就会忽略它，不会对它进行任何“改造”。这就像给对象贴上了一张“免死金牌”，让它免受响应式系统的“骚扰”。

import { reactive, markRaw } from 'vue';

const obj = {
  name: 'Vue',
  version: 3
};

markRaw(obj);

const reactiveObj = reactive(obj);

console.log(reactiveObj.name); // Vue

reactiveObj.name = 'React';

console.log(reactiveObj.name); // React  <-- 能够修改，但是不会触发响应式更新

可以看到，虽然 reactiveObj 是一个响应式对象，但是由于 obj 被 markRaw 标记了，所以修改 reactiveObj.name 不会触发任何响应式更新。

markRaw 的设计意图：

• 性能优化： 对于一些永远不需要响应式更新的数据，比如大型数据缓存，你可以使用 markRaw 来避免不必要的性能开销。
• 与非 Vue 代码集成： 有些第三方库返回的对象，或者一些老代码，可能和 Vue 的响应式系统存在冲突，你可以使用 markRaw 来避免这些冲突。
• 控制响应式范围： 有时候，你只想让对象的部分属性是响应式的，而另一些属性是非响应式的，你可以使用 markRaw 来控制响应式的范围。

使用场景举例：

假设你正在使用一个第三方图表库，这个库需要一个原始的 JavaScript 对象作为数据源。如果你直接把响应式对象传递给这个库，可能会导致一些问题。这时候，你可以使用 markRaw 来标记这个对象，让 Vue 的响应式系统忽略它：

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

<script setup>
import { ref, onMounted, reactive, markRaw } from 'vue';
import * as echarts from 'echarts'; // 假设你使用的是 ECharts

const chartContainer = ref(null);

const chartData = reactive({
  title: 'My Chart',
  series: [
    { name: 'A', value: 10 },
    { name: 'B', value: 20 },
    { name: 'C', value: 30 }
  ]
});

// 标记 chartData 为非响应式
markRaw(chartData);

onMounted(() => {
  const chart = echarts.init(chartContainer.value);

  const options = {
    title: {
      text: chartData.title
    },
    series: [
      {
        type: 'pie',
        data: chartData.series
      }
    ]
  };

  chart.setOption(options);
});
</script>

在这个例子中，markRaw(chartData) 标记了 chartData 为非响应式，避免了 ECharts 库和 Vue 的响应式系统之间的冲突。

注意事项：

• markRaw 是一个“深度”操作，它会递归地标记对象的所有属性为非响应式。
• markRaw 只能用于对象，不能用于基本类型。
• markRaw 标记的对象仍然可以被修改，但是修改不会触发响应式更新。
• markRaw 标记的对象如果被嵌套在响应式对象里，那它还是会失去 markRaw 的效果，因为外层对象会尝试响应式化其内部的属性。

4. toRaw vs. markRaw：傻傻分不清楚？

toRaw 和 markRaw 都是用来和 Vue 的响应式系统“划清界限”的，但是它们的设计意图和使用场景却有所不同。

特性	toRaw	markRaw
作用	获取响应式对象的原始对象	标记一个对象为非响应式
是否改变原始对象	否	是
返回值	原始对象的引用	被标记的对象本身
应用场景	访问原始数据、性能优化、调试	性能优化、与非 Vue 代码集成、控制响应式范围
深度操作	否（只返回最外层对象的原始对象）	是（递归地标记对象的所有属性为非响应式）

简单来说，toRaw 是“金蝉脱壳”，让你在不影响响应式对象的前提下，访问它的原始数据；markRaw 是“免死金牌”，让对象彻底摆脱响应式系统的“魔爪”。

5. 与非 Vue 响应式系统交互

toRaw 和 markRaw 在与非 Vue 响应式系统交互时，主要起到以下作用：

• 避免冲突： 有些第三方库或者老代码，可能使用了自己的响应式系统，或者对数据有一些特殊的要求。使用 toRaw 和 markRaw 可以避免 Vue 的响应式系统和这些代码之间的冲突。
• 提高性能： 有些第三方库可能不需要响应式更新，使用 toRaw 和 markRaw 可以避免不必要的性能开销。
• 数据转换： 有些第三方库可能需要特定格式的数据，使用 toRaw 可以方便地将响应式对象转换为原始的 JavaScript 对象。

总而言之，toRaw 和 markRaw 可以帮助你更好地控制 Vue 的响应式系统，让你的代码更加灵活和高效。

6. 总结

toRaw 和 markRaw 是 Vue 3 中两个非常实用的 API，它们可以帮助你更好地管理响应式数据，提高性能，并与非 Vue 代码集成。

• toRaw 用于获取响应式对象的原始对象，方便你访问原始数据、进行性能优化和调试。
• markRaw 用于标记一个对象为非响应式，避免 Vue 的响应式系统对它进行“改造”，适用于性能优化、与非 Vue 代码集成和控制响应式范围等场景。

希望通过今天的讲解，你能对 toRaw 和 markRaw 有更深入的理解，并在实际项目中灵活运用它们。

好了，今天的讲座就到这里，谢谢大家！