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

好的，各位观众老爷，今天咱们来聊聊 Vue 3 源码里两个挺有意思的小家伙：toRaw 和 markRaw。别看它们名字平平无奇，在 Vue 的响应式世界里，可是扮演着关键角色。尤其是当你需要和一些“不解风情”的非 Vue 响应式系统打交道时，它们就成了你的救星。

开场白：Vue 的响应式“癖好”

话说，Vue 3 搞了一套很强大的响应式系统，用 Proxy 代理对象，然后监听数据的变化，一旦数据变了，视图就能自动更新。这听起来很美好，但它也有个“癖好”：它喜欢把所有东西都变成响应式的。

有时候，这并不是我们想要的。比如，我们从外部库拿来一个对象，或者创建了一个性能敏感的对象，只想让它安安静静地存在，不想让 Vue 的响应式机制插手。这时候，toRaw 和 markRaw 就派上用场了。

第一幕：toRaw——“坦白从宽，抗拒从严”

toRaw 的作用很简单，就是把一个响应式对象“剥皮抽筋”，还原成它最初的原始对象。 就像一个间谍伪装得再好，toRaw 也能把他/她的真实身份揪出来。

• 设计意图：

  • 访问原始数据： 有时候，你可能需要直接访问响应式对象的原始数据，绕过 Vue 的响应式系统。比如，你要比较两个对象是否相等，如果直接比较响应式对象，由于 Proxy 的存在，可能会得到错误的结果。
  • 性能优化： 在一些性能敏感的场景下，直接操作原始数据可能比操作响应式对象更快。因为操作响应式对象会触发一系列的依赖追踪和更新流程。

• 使用场景：

  • 比较对象： 比较两个响应式对象的内容是否相等。
  • 序列化/反序列化： 将响应式对象序列化为 JSON 字符串时，通常需要先转换为原始对象，避免序列化 Proxy 对象导致的问题。
  • 性能优化： 在某些情况下，直接操作原始对象可以提高性能。

• 代码示例：

  import { reactive, toRaw } from 'vue';
  
  const rawObject = { name: '张三', age: 30 };
  const reactiveObject = reactive(rawObject);
  
  console.log(reactiveObject.name); // 张三 (响应式访问)
  
  const originalObject = toRaw(reactiveObject);
  console.log(originalObject.name); // 张三 (原始访问)
  
  console.log(reactiveObject === rawObject); // false (reactiveObject 是一个 Proxy 对象)
  console.log(originalObject === rawObject); // true (originalObject 和 rawObject 是同一个对象)
  
  // 修改原始对象，响应式对象不会同步更新（因为我们已经绕过了响应式系统）
  originalObject.age = 40;
  console.log(reactiveObject.age); // 30 (仍然是 30，因为原始对象的修改不会触发响应式更新)

  重点: toRaw 返回的是原始对象的引用，这意味着如果你直接修改这个原始对象，Vue 的响应式系统是不会感知到的。

• 原理简析：

  toRaw 的实现很简单，它实际上是在响应式对象的内部存储了一个指向原始对象的引用。当调用 toRaw 时，它直接返回这个引用。可以理解为 toRaw 就是把藏在响应式对象内部的原始对象“挖”了出来。

第二幕：markRaw——“此地禁止通行！”

markRaw 的作用是给一个对象贴上一个“免死金牌”，告诉 Vue 的响应式系统：“这个对象朕罩着了，你别碰它！”。 简单说，就是阻止 Vue 将这个对象变成响应式的。

• 设计意图：

  • 性能优化： 对于一些不需要响应式更新的大型对象或组件，使用 markRaw 可以避免不必要的性能开销。
  • 与第三方库集成： 有些第三方库返回的对象不应该被 Vue 的响应式系统代理，使用 markRaw 可以防止潜在的问题。
  • 控制响应式范围： 有时候，你只想让部分数据是响应式的，而另一些数据保持不变，markRaw 可以帮助你实现这种控制。

• 使用场景：

  • 大型数据结构： 例如，一个包含大量数据的图表组件，如果将其所有数据都变成响应式的，可能会影响性能。
  • 第三方库对象： 例如，一个地图库返回的地图对象，通常不需要响应式更新。
  • 不可变数据： 例如，一个常量对象，其值永远不会改变。

• 代码示例：

  import { reactive, markRaw } from 'vue';
  
  const rawObject = { name: '李四', age: 25 };
  markRaw(rawObject); // 给 rawObject 贴上“免死金牌”
  
  const reactiveObject = reactive({
    user: rawObject, // user 属性指向一个非响应式对象
    count: 0
  });
  
  console.log(reactiveObject.user.name); // 李四 (可以访问，但不是响应式的)
  
  reactiveObject.user.age = 35; // 修改 rawObject
  console.log(reactiveObject.user.age); // 35 (修改生效，但不会触发响应式更新)
  
  reactiveObject.count++; // 修改响应式属性
  console.log(reactiveObject.count); // 1 (触发响应式更新)

  重点: markRaw 是“深度免疫”，它会阻止 Vue 将对象及其所有子属性都变成响应式的。即使你将 markRaw 标记的对象赋值给一个响应式属性，这个对象仍然是非响应式的。

• 原理简析：

  markRaw 的实现也很简单，它会在对象上添加一个特殊的标志，告诉 Vue 的响应式系统忽略这个对象。当 Vue 尝试将一个对象变成响应式的时候，它会先检查这个对象是否已经被 markRaw 标记，如果是，则直接跳过。

第三幕：toRaw 和 markRaw 的区别

特性	toRaw	markRaw
作用	获取响应式对象的原始对象	阻止对象变成响应式
影响范围	只影响当前对象	影响对象及其所有子属性
是否修改对象	不修改原始对象，只是返回引用	修改原始对象，添加一个标志
使用场景	需要访问原始数据、比较对象、序列化等	性能优化、与第三方库集成、控制响应式范围等
是否可逆	可以通过重新 reactive 将原始对象变为响应式	无法逆转，一旦标记，永远都是非响应式的

第四幕：与非 Vue 响应式系统交互

重点来了！当你的 Vue 应用需要和一些“不解风情”的非 Vue 响应式系统打交道时，toRaw 和 markRaw 就成了你的秘密武器。

假设你正在使用一个外部的图表库，这个库自己管理数据的更新，不需要 Vue 的响应式系统插手。这时候，你就可以使用 markRaw 来标记图表的数据，避免 Vue 尝试将其变成响应式的，从而提高性能并避免潜在的冲突。

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

  import { onMounted, reactive, markRaw } from 'vue';
  import * as Chart from 'chart.js'; // 假设这是一个外部的图表库
  
  export default {
    setup() {
      const chartData = markRaw({ // 使用 markRaw 标记图表数据
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      });
  
      const chartOptions = markRaw({ // 使用 markRaw 标记图表配置
        scales: {
          y: {
            beginAtZero: true
          }
        }
      });
  
      let chartInstance = null;
  
      onMounted(() => {
        const ctx = document.getElementById('myChart').getContext('2d');
        chartInstance = new Chart(ctx, {
          type: 'bar',
          data: chartData,
          options: chartOptions
        });
      });
  
      // 更新图表数据 (直接操作原始数据，图表库自己会处理更新)
      const updateChartData = () => {
        chartData.datasets[0].data = [5, 10, 15, 20, 25, 30];
        chartInstance.update(); // 调用图表库的更新方法
      };
  
      return {
        updateChartData
      };
    },
    template: `
      <canvas id="myChart"></canvas>
      <button @click="updateChartData">Update Chart</button>
    `
  };

  在这个例子中，我们使用 markRaw 标记了图表的数据和配置对象，避免了 Vue 尝试将其变成响应式的。然后，我们直接操作原始数据，并调用图表库的 update 方法来更新图表。这样，我们就可以将 Vue 和第三方库无缝集成，而不用担心响应式系统带来的问题。

第五幕：注意事项

• 谨慎使用： toRaw 和 markRaw 都是“高级” API，使用不当可能会导致一些意想不到的问题。只有在你真正理解它们的含义和作用时，才应该使用它们。
• 避免滥用： 不要为了“优化”而滥用 markRaw。只有当你确定某个对象不需要响应式更新时，才应该使用它。
• 测试： 在使用 toRaw 和 markRaw 之后，一定要进行充分的测试，确保你的代码仍然能够正常工作。

总结陈词：掌握工具，才能游刃有余

toRaw 和 markRaw 是 Vue 3 响应式系统中的两个重要工具。它们可以帮助你更好地控制响应式的范围，与非 Vue 响应式系统进行交互，以及优化性能。 掌握这两个工具，你就能在 Vue 的世界里游刃有余，写出更高效、更健壮的代码。

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