Vue 3 性能优化：markRaw 和 toRaw 的妙用
各位靓仔靓女，早上好！我是今天的主讲人，江湖人称“代码磨刀石”。今天咱们不聊美女帅哥，专门聊聊Vue 3里的两个“小透明”API——markRaw和toRaw，它们在优化大型静态数据和第三方库交互方面，可是藏着大智慧呢！
开场白：响应式系统的甜蜜负担
在Vue的世界里，响应式系统就像一个无微不至的管家，时刻监听着数据的变化，一旦发现数据有任何风吹草动，立刻通知相关的组件进行更新。听起来是不是很棒？
但凡事都有两面性，这份“无微不至”也是有代价的。想象一下，如果你家里住着一个管家，他不仅要管理你的工资卡余额，还要管理你的所有书籍、摆件，甚至连你小时候玩过的弹珠都要监控，那这位管家岂不是要累死？
Vue的响应式系统也是一样。它会递归地将所有数据都变成响应式的，这意味着每个属性都会被加上getter和setter，以便追踪数据的变化。对于那些永远不会改变的静态数据，或者由第三方库管理的数据，这种响应式处理就显得多余，反而会带来性能上的负担。
markRaw：给数据贴上“免检”标签
markRaw就像一个“免检”标签，贴在数据上之后，Vue的响应式系统就会对它视而不见。这意味着被markRaw标记的数据，不会被转化为响应式对象，从而节省了大量的性能开销。
使用场景1：大型静态数据
假设你有一个包含大量数据的数组，这些数据从一开始就被加载进来，并且永远不会改变。比如：
const hugeData = [
{ id: 1, name: 'Apple', price: 2.5 },
{ id: 2, name: 'Banana', price: 1.8 },
// ... 包含成千上万条数据
];如果直接将hugeData放到Vue组件的data中，Vue会递归地将数组中的每个对象都变成响应式的，这显然是没必要的。这时候，markRaw就可以派上用场了：
import { markRaw } from 'vue';
export default {
data() {
return {
hugeData: markRaw([
{ id: 1, name: 'Apple', price: 2.5 },
{ id: 2, name: 'Banana', price: 1.8 },
// ... 包含成千上万条数据
]),
};
},
template: `
<ul>
<li v-for="item in hugeData" :key="item.id">{{ item.name }} - ${{ item.price }}</li>
</ul>
`
};代码解释：
import { markRaw } from 'vue';：首先，我们需要从Vue中导入markRaw函数。hugeData: markRaw([...])：使用markRaw将hugeData标记为非响应式数据。template：在模板中，我们可以像使用普通数组一样使用hugeData。
效果：
通过使用markRaw，我们告诉Vue不要对hugeData进行响应式处理，从而避免了大量的性能开销。组件渲染速度会更快，内存占用也会更少。
使用场景2：第三方库的对象
很多第三方库，比如ECharts、Three.js等，它们自己管理着内部的状态，并不需要Vue的响应式系统来干预。如果将这些库的对象直接放到Vue组件的data中，Vue会试图将它们变成响应式的，这不仅会浪费性能，还可能导致一些奇怪的问题。
import * as echarts from 'echarts';
import { markRaw, onMounted } from 'vue';
export default {
data() {
return {
chartInstance: null, // 声明一个chartInstance
};
},
mounted() {
const chartDom = document.getElementById('myChart');
this.chartInstance = markRaw(echarts.init(chartDom)); // 使用markRaw将echarts实例标记为非响应式
this.chartInstance.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
});
},
beforeUnmount() {
if (this.chartInstance) {
this.chartInstance.dispose(); // 销毁echarts实例
}
},
template: '<div id="myChart" style="width: 600px; height: 400px;"></div>'
};代码解释：
import * as echarts from 'echarts';：导入ECharts库。this.chartInstance = markRaw(echarts.init(chartDom));：使用markRaw将ECharts实例chartInstance标记为非响应式。beforeUnmount：在组件卸载前，销毁ECharts实例，防止内存泄漏。
效果：
通过使用markRaw，我们避免了Vue对ECharts实例的响应式处理，从而避免了潜在的问题，并提高了性能。
注意事项：
markRaw只能标记对象，不能标记基本数据类型（如字符串、数字、布尔值）。markRaw是深度的，也就是说，如果一个对象被markRaw标记了，那么它的所有属性也会被视为非响应式的。
toRaw：扒掉响应式系统的“马甲”
toRaw的作用正好相反，它是用来将一个响应式对象还原成原始对象的。你可以把它想象成一个“卸妆水”，可以将响应式对象脸上的“妆容”（getter和setter）卸掉，露出它本来的面目。
使用场景1：与第三方库交互
有些第三方库可能需要接收原始的JavaScript对象，而不是Vue的响应式对象。这时候，toRaw就可以派上用场了。
import { reactive, toRaw } from 'vue';
export default {
data() {
return {
person: reactive({
name: '张三',
age: 30,
}),
};
},
mounted() {
// 假设有一个第三方库需要接收原始的person对象
const rawPerson = toRaw(this.person);
someThirdPartyLibrary(rawPerson);
},
};
function someThirdPartyLibrary(person) {
// 在这个函数里，我们可以安全地操作原始的person对象
console.log(person.name, person.age);
}代码解释：
person: reactive({...})：person是一个响应式对象。const rawPerson = toRaw(this.person);：使用toRaw将响应式对象this.person转换为原始对象rawPerson。someThirdPartyLibrary(rawPerson);：将原始对象rawPerson传递给第三方库。
效果：
通过使用toRaw，我们可以将Vue的响应式对象转换为原始对象，从而避免了第三方库无法处理响应式对象的问题。
使用场景2：性能优化
在某些情况下，我们可能需要对响应式对象进行一些高性能的操作，比如大量的数组操作。直接对响应式对象进行操作可能会比较慢，因为每次操作都会触发getter和setter。这时候，我们可以先使用toRaw将响应式对象转换为原始对象，进行操作之后再将结果更新到响应式对象中。
import { reactive, toRaw } from 'vue';
export default {
data() {
return {
list: reactive([
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' },
]),
};
},
methods: {
updateList() {
// 1. 获取原始的list数组
const rawList = toRaw(this.list);
// 2. 对原始数组进行高性能的操作
rawList.push({ id: 4, name: 'Grape' });
rawList.sort((a, b) => a.name.localeCompare(b.name));
// 3. 将更新后的原始数组更新到响应式数组中
this.list.length = 0; // 清空响应式数组
rawList.forEach(item => this.list.push(item)); // 将原始数组的元素添加到响应式数组中
},
},
template: `
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
<button @click="updateList">Update List</button>
`
};代码解释：
const rawList = toRaw(this.list);：使用toRaw将响应式数组this.list转换为原始数组rawList。rawList.push(...)和rawList.sort(...)：对原始数组进行高性能的操作。this.list.length = 0;和rawList.forEach(...)：将更新后的原始数组更新到响应式数组中。 注意，这里不能直接this.list = rawList赋值，因为这样会失去响应性。 我们需要先清空this.list， 然后把rawList的内容逐个推入this.list。
效果：
通过使用toRaw，我们可以避免在数组操作过程中触发大量的getter和setter，从而提高性能。
注意事项：
toRaw返回的是原始对象的引用，而不是拷贝。这意味着，如果你修改了toRaw返回的对象，原始对象也会被修改。toRaw只能用于响应式对象，不能用于普通对象。
markRaw vs toRaw：傻傻分不清？
| 特性 | markRaw |
toRaw |
|---|---|---|
| 作用 | 阻止对象被转化为响应式对象 | 将响应式对象还原成原始对象 |
| 适用场景 | 大型静态数据、第三方库的对象 | 与第三方库交互、性能优化 |
| 返回值 | 原始对象 | 原始对象的引用 |
| 影响 | 及其属性都不会变成响应式 | 仅返回原始对象，不影响原始对象的响应性 |
简单来说：
markRaw：给数据贴上“别碰我”的标签，让Vue的响应式系统绕道走。toRaw：给响应式对象卸妆，还原成素颜状态。
进阶技巧：结合使用
在实际开发中，markRaw和toRaw可以结合使用，以达到更好的性能优化效果。例如，我们可以将一个大型的静态数据标记为非响应式的，然后在需要的时候使用toRaw获取原始对象进行操作。
import { reactive, toRaw, markRaw } from 'vue';
const hugeData = markRaw([
{ id: 1, name: 'Apple', price: 2.5 },
{ id: 2, name: 'Banana', price: 1.8 },
// ... 包含成千上万条数据
]);
export default {
data() {
return {
list: reactive(hugeData.slice(0, 10)), // 只取前10条数据作为响应式数据
};
},
methods: {
showAllData() {
// 1. 获取原始的hugeData数组
const rawHugeData = toRaw(hugeData);
// 2. 将原始数组的所有数据更新到响应式数组中
this.list.length = 0;
rawHugeData.forEach(item => this.list.push(item));
},
},
template: `
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }} - ${{ item.price }}</li>
</ul>
<button @click="showAllData">Show All Data</button>
`
};代码解释：
const hugeData = markRaw([...]);：使用markRaw将hugeData标记为非响应式数据。list: reactive(hugeData.slice(0, 10))：只取hugeData的前10条数据作为响应式数据，避免一次性将所有数据都变成响应式的。const rawHugeData = toRaw(hugeData);：在需要的时候，使用toRaw获取原始的hugeData数组。
效果：
通过结合使用markRaw和toRaw，我们既避免了对大型静态数据进行不必要的响应式处理，又可以在需要的时候方便地获取原始数据进行操作。
总结：性能优化的葵花宝典
markRaw和toRaw是Vue 3中两个非常有用的API，它们可以帮助我们优化大型静态数据和第三方库交互方面的性能。
markRaw适用于那些永远不会改变的数据，或者由第三方库管理的数据。使用它可以避免不必要的响应式处理，节省性能开销。toRaw适用于需要与第三方库交互，或者需要对响应式对象进行高性能操作的场景。使用它可以将响应式对象转换为原始对象，从而避免潜在的问题，并提高性能。
记住，性能优化没有银弹，需要根据具体的场景进行分析和选择。希望今天的讲解能帮助大家更好地理解和使用markRaw和toRaw，写出更高效的Vue应用！
好了，今天的讲座就到这里，谢谢大家！ 散会！