在 Vue 3 应用中，如何利用 `markRaw` 和 `toRaw`，优化大型静态数据或与第三方库的交互？

Vue 3 高级用法：markRaw 和 toRaw 的妙用 —— 大型静态数据与第三方库的救星！

大家好！我是你们的老朋友，江湖人称“代码段子手”的李狗蛋。今天咱们不聊风花雪月，来点硬核的——Vue 3 的 markRaw 和 toRaw。

估计有些小伙伴看到这两个 API 就觉得头大，心里嘀咕：“这又是啥玩意儿？官方文档看了八百遍，还是云里雾里”。别慌！今天狗蛋就用最接地气的方式，把这俩兄弟扒个底朝天，保证你听完之后，能像用筷子夹花生米一样，轻松驾驭它们！

第一回：markRaw —— 给数据穿上“免死金牌”！

首先，咱们说说 markRaw。顾名思义，markRaw 就是“标记为原始的”。啥意思呢？就是告诉 Vue：“这个数据，你别管了！别给我做响应式代理！就让它保持原汁原味！”

为啥要有这玩意儿？

你想啊，Vue 的响应式系统虽然强大，但也是有代价的。每次访问数据，Vue 都要进行依赖收集、触发更新等等操作。如果你的数据压根不需要响应式，那 Vue 岂不是白忙活一场？性能就这么被白白浪费了！

啥时候用 markRaw？

1. 大型静态数据： 比如一个巨大的配置对象、一个从服务器拉取下来的、永远不会改变的数据，或者是一个巨大的状态树。
2. 第三方库的对象： 有些第三方库本身就自带状态管理，或者对性能有极致的要求，不希望被 Vue 的响应式系统“插一脚”。
3. 性能敏感的场景： 在一些需要极致性能的场景下，可以手动控制哪些数据需要响应式，哪些不需要。

代码演示：

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

// 一个大型静态数据
const hugeData = {
  name: '超级无敌静态数据',
  version: '1.0.0',
  author: '李狗蛋',
  description: '这是一个非常非常大的静态数据对象，包含各种配置信息，不希望被 Vue 追踪',
  // 假设这里有很多很多属性...
  settings: {
    theme: 'dark',
    language: 'zh-CN',
    // 更多配置...
  }
};

// 使用 markRaw 标记为原始数据
const rawData = markRaw(hugeData);

// 创建响应式对象
const state = reactive({
  data: rawData,
  counter: 0,
});

// 尝试修改 rawData
rawData.name = '修改后的名字'; // 可以修改，但不会触发 Vue 的更新！

// 尝试修改 state.data.name
state.data.name = '再次修改'; // 同样可以修改，但因为 rawData 被 markRaw 了，所以不会触发 Vue 的更新！

console.log(state.data.name); // 输出 "再次修改"
console.log(hugeData.name); // 输出 "修改后的名字"

// 增加计数器，触发更新
state.counter++; // 这会触发 Vue 的更新，但不会影响 rawData

代码解读：

• markRaw(hugeData)：这行代码就像给 hugeData 穿上了一件“免死金牌”，告诉 Vue：“别碰它！就让它保持原始状态！”
• state.data = rawData：虽然 rawData 被赋值给了 state.data，但由于 rawData 已经被 markRaw 标记，所以 Vue 不会对其进行响应式代理。
• 修改 rawData.name 和 state.data.name 都可以成功，但不会触发 Vue 的更新。这意味着，即使 state.data 被修改了，使用了 state.data 的组件也不会重新渲染。
• state.counter++ 这行代码会触发 Vue 的更新，因为 counter 是一个响应式属性。

注意事项：

• markRaw 是“深层”无效的。也就是说，如果你 markRaw 了一个对象，那么这个对象本身不会被代理，但如果这个对象内部包含了其他的对象，那些对象仍然会被代理（除非你也 markRaw 它们）。
• markRaw 会影响 toRef 和 toRefs 的行为。toRef 和 toRefs 只能创建对原始值的引用，而不能创建对 markRaw 标记的对象的属性的引用。

使用场景举例：

假设你正在开发一个地图应用，地图数据非常庞大，而且不会频繁更新。你就可以使用 markRaw 来标记地图数据，避免 Vue 的响应式系统带来的性能损耗。

import { reactive, markRaw } from 'vue';

// 模拟一个大型地图数据
const mapData = {
  tiles: [], // 大量的地图瓦片数据
  markers: [], // 大量的标记点数据
  // 更多地图数据...
};

// 使用 markRaw 标记地图数据
const rawMapData = markRaw(mapData);

const state = reactive({
  mapData: rawMapData,
  center: { lat: 30.0, lng: 120.0 }, // 地图中心点
});

// 修改地图中心点，触发更新
state.center = { lat: 31.0, lng: 121.0 }; // 这会触发 Vue 的更新

// 修改地图瓦片数据，不会触发更新
// state.mapData.tiles[0] = ...; // 这样做不会触发更新，因为 mapData 被 markRaw 了

在这个例子中，只有地图中心点 state.center 是响应式的，地图数据 state.mapData 是原始的。这样可以避免 Vue 的响应式系统对地图数据的性能损耗，提高应用的性能。

第二回：toRaw —— 扒掉数据的“马甲”，还原真身！

接下来，咱们聊聊 toRaw。toRaw 的作用和 markRaw 正好相反，它是用来“解开”响应式代理的，把一个响应式对象还原成原始对象。

为啥要有这玩意儿？

有时候，我们需要访问响应式对象的原始值，进行一些不希望被 Vue 追踪的操作，或者需要将原始对象传递给一些不兼容响应式对象的第三方库。这时候，toRaw 就派上用场了。

啥时候用 toRaw？

1. 访问原始值： 当你需要访问响应式对象的原始值，而不是经过 Vue 代理后的值时。
2. 与第三方库交互： 当你需要将数据传递给一些不兼容响应式对象的第三方库时。
3. 性能优化： 在一些需要极致性能的场景下，可以避免 Vue 的响应式系统带来的性能损耗。

代码演示：

import { reactive, toRaw } from 'vue';

// 创建一个响应式对象
const state = reactive({
  name: '李狗蛋',
  age: 18,
});

// 使用 toRaw 获取原始对象
const rawState = toRaw(state);

// 修改原始对象
rawState.name = '王铁锤'; // 修改了原始对象

console.log(state.name); // 输出 "王铁锤"，因为原始对象被修改了，响应式对象也会同步更新
console.log(rawState.name); // 输出 "王铁锤"

// 比较原始对象和响应式对象
console.log(state === rawState); // 输出 false，因为它们是不同的对象

// 比较原始对象和响应式对象的原始值
console.log(toRaw(state) === rawState); // 输出 true，因为它们指向同一个原始对象

代码解读：

• toRaw(state)：这行代码就像给 state 拍了一张“X 光片”，把它的原始对象“扒”了出来。
• 修改 rawState.name 会影响 state.name，因为它们指向同一个原始对象。
• state === rawState 返回 false，因为 state 是一个响应式对象，rawState 是一个原始对象，它们是不同的对象。
• toRaw(state) === rawState 返回 true，因为 toRaw(state) 获取的是 state 的原始对象，和 rawState 指向的是同一个对象。

注意事项：

• toRaw 只会返回最外层对象的原始值，不会递归地解开嵌套对象的响应式代理。
• toRaw 返回的是原始对象的引用，而不是拷贝。这意味着，修改原始对象会影响响应式对象，反之亦然。

使用场景举例：

假设你正在使用一个第三方图表库，这个库只接受普通的 JavaScript 对象作为数据源。你可以使用 toRaw 将 Vue 的响应式数据转换为普通对象，传递给图表库。

import { reactive, toRaw } from 'vue';
import Chart from 'chart.js'; // 假设这是一个第三方图表库

// 创建一个响应式数据
const state = reactive({
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  data: [12, 19, 3, 5, 2, 3],
});

// 使用 toRaw 将响应式数据转换为普通对象
const chartData = {
  labels: toRaw(state.labels),
  datasets: [{
    label: '# of Votes',
    data: toRaw(state.data),
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 206, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(255, 159, 64, 0.2)'
    ],
    borderColor: [
      'rgba(255, 99, 132, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)'
    ],
    borderWidth: 1
  }]
};

// 创建图表
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

在这个例子中，我们使用 toRaw 将 state.labels 和 state.data 转换为普通数组，传递给 Chart.js 库。这样可以避免 Chart.js 库与 Vue 的响应式系统发生冲突。

第三回：markRaw 和 toRaw 的组合拳 —— 打造高性能应用！

markRaw 和 toRaw 就像一对好基友，可以一起使用，打造高性能的 Vue 应用。

使用场景举例：

假设你正在开发一个游戏应用，游戏状态非常复杂，而且需要频繁更新。你可以使用 markRaw 来标记游戏状态中不需要响应式的部分，然后使用 toRaw 将游戏状态传递给游戏引擎。

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

// 模拟一个游戏状态
const gameState = {
  player: {
    name: '李狗蛋',
    level: 1,
    hp: 100,
  },
  enemies: [
    { name: '小怪', hp: 10 },
    { name: 'BOSS', hp: 1000 },
  ],
  map: {
    tiles: [], // 大量的地图瓦片数据
  },
};

// 使用 markRaw 标记地图数据，避免响应式更新
gameState.map = markRaw(gameState.map);

// 创建响应式游戏状态
const state = reactive({
  gameState: gameState,
  score: 0,
});

// 模拟游戏引擎
const gameEngine = {
  update(gameState) {
    // 游戏引擎根据游戏状态进行更新
    // 这里可以进行大量的计算和逻辑处理
    console.log('游戏引擎正在更新游戏状态...', gameState);
  },
};

// 游戏循环
function gameLoop() {
  // 使用 toRaw 将游戏状态传递给游戏引擎
  gameEngine.update(toRaw(state.gameState));

  // 更新游戏分数
  state.score++;

  // 请求下一帧
  requestAnimationFrame(gameLoop);
}

// 启动游戏循环
gameLoop();

在这个例子中，我们使用 markRaw 标记了地图数据 gameState.map，避免了 Vue 的响应式更新。然后，我们使用 toRaw 将整个游戏状态 state.gameState 传递给游戏引擎，避免了游戏引擎与 Vue 的响应式系统发生冲突。这样可以极大地提高游戏应用的性能。

第四回：最佳实践与注意事项

功能	描述	使用场景	注意事项
markRaw	标记一个对象为非响应式，Vue 将跳过对其的响应式代理。	大型静态数据、第三方库返回的对象、性能敏感的场景。	1. 深层无效：只影响直接标记的对象，不影响其内部嵌套的对象。 2. 影响 toRef 和 toRefs 的行为。
toRaw	返回响应式对象的原始对象，取消响应式代理。	访问原始值、与第三方库交互、性能优化。	1. 只返回最外层对象的原始值，不递归解开嵌套对象的响应式代理。 2. 返回的是原始对象的引用，修改原始对象会影响响应式对象。
组合使用	使用 markRaw 标记不需要响应式的数据，然后使用 toRaw 将数据传递给第三方库或游戏引擎。	1. 理解 markRaw 和 toRaw 的作用和区别。 2. 根据实际情况选择是否使用 markRaw 和 toRaw。 3. 注意 markRaw 的深层无效性。 4. 注意 toRaw 返回的是原始对象的引用。

一些最佳实践：

• 谨慎使用 markRaw： 只有当你确定某个数据不需要响应式更新时，才应该使用 markRaw。过度使用 markRaw 可能会导致应用状态管理混乱。
• 避免在模板中使用 toRaw： 在模板中使用 toRaw 可能会导致性能问题，因为它会绕过 Vue 的响应式系统。尽量在 JavaScript 代码中使用 toRaw。
• 充分测试： 在使用 markRaw 和 toRaw 之后，一定要进行充分的测试，确保应用的行为符合预期。

第五回：总结与展望

今天，咱们一起深入了解了 Vue 3 的 markRaw 和 toRaw 这两个 API。希望通过今天的讲解，你能够更好地理解它们的作用和使用场景，并在实际开发中灵活运用，打造高性能的 Vue 应用。

记住，markRaw 和 toRaw 就像两把利剑，用对了可以披荆斩棘，用错了可能会伤到自己。所以，在使用它们之前，一定要仔细思考，权衡利弊。

Vue 的世界充满着惊喜和挑战。希望大家能够不断学习，不断探索，成为一名优秀的 Vue 开发者！

好了，今天的讲座就到这里。我是李狗蛋，咱们下期再见！