大家好，我是你们今天的讲师，咱们今天聊聊 Vue 3 里两个有点酷，但又容易被忽略的小技巧：markRaw 和 toRaw。
引子：Vue 的响应式魔法与它的代价
Vue 的核心是响应式系统，它能让我们轻松地把数据绑定到视图，当数据改变时，视图自动更新。这就像魔法一样，但任何魔法都有代价。Vue 为了实现响应式，会对所有的数据进行“深度监听”，也就是递归地把对象和数组都变成响应式的。
// 一个简单的 Vue 组件
import { ref } from 'vue';
export default {
setup() {
const data = ref({
name: '小明',
age: 18,
address: {
city: '北京',
street: '王府井大街'
}
});
setTimeout(() => {
data.value.age = 20; // 触发响应式更新
}, 2000);
return {
data
};
}
};在这个例子里，data 对象里的所有属性，包括嵌套的 address 对象，都被 Vue 变成了响应式的。当我们修改 data.value.age 时，Vue 会检测到这个变化，并通知所有依赖于 age 的视图进行更新。
但是，问题来了。如果我们的数据量很大，或者数据结构很复杂，那么 Vue 的响应式系统就会消耗大量的性能。特别是对于一些静态数据，或者来自第三方库的数据，我们根本不需要它们是响应式的，但 Vue 仍然会“好心”地把它们变成响应式的。
markRaw：让 Vue 别碰它！
这时候，markRaw 就派上用场了。它可以告诉 Vue：“嘿，这个对象，我不需要你把它变成响应式的，你别碰它！”。
import { markRaw, ref } from 'vue';
export default {
setup() {
const largeStaticData = markRaw({ // 用 markRaw 包裹
id: 1,
name: '一个很大的静态数据',
description: '这个数据很大很大，而且永远不会改变',
items: Array(1000).fill({ id: 1, value: 'item' }) // 假设有 1000 个 item
});
const reactiveData = ref({
...largeStaticData, // 将静态数据混入响应式数据
count: 0
});
setTimeout(() => {
reactiveData.value.count++; // 只会影响 count，不会影响 largeStaticData
}, 2000);
return {
reactiveData
};
}
};在这个例子里，我们使用 markRaw 包裹了 largeStaticData 对象。这样，Vue 就不会对 largeStaticData 对象进行响应式处理。即使我们将 largeStaticData 对象混入到响应式数据 reactiveData 中，largeStaticData 仍然是非响应式的。
适用场景：
- 大型静态数据： 比如从服务器获取的配置数据，或者一些静态的字典数据，这些数据通常不会改变，不需要响应式处理。
- 第三方库的数据： 比如一些图表库返回的数据，或者一些游戏引擎的数据，这些数据通常有自己的更新机制，不需要 Vue 的响应式系统介入。
- 性能敏感的场景： 如果你的组件需要处理大量的数据，或者需要频繁地更新数据，那么使用
markRaw可以有效地提高性能。
注意事项：
markRaw只能标记对象，不能标记基本类型（比如字符串、数字、布尔值）。markRaw是“浅”标记，也就是说，它只会标记对象本身，不会递归地标记对象的属性。如果对象的属性也是对象，那么这些属性仍然会被 Vue 变成响应式的。
const obj = {
a: 1,
b: {
c: 2
}
};
const rawObj = markRaw(obj);
// rawObj 本身是非响应式的
rawObj.a = 3; // 可以直接修改，不会触发响应式更新
// rawObj.b 仍然是响应式的
rawObj.b.c = 4; // 会触发响应式更新toRaw：把响应式对象变回普通对象
与 markRaw 相反，toRaw 的作用是把一个响应式对象变回一个普通的 JavaScript 对象。
import { reactive, toRaw } from 'vue';
const reactiveObj = reactive({
name: '小红',
age: 16
});
const rawObj = toRaw(reactiveObj);
// rawObj 是一个普通的 JavaScript 对象，不是响应式的
rawObj.age = 18; // 修改 rawObj 不会触发 reactiveObj 的更新
console.log(reactiveObj.age); // 仍然是 16在这个例子里，我们使用 reactive 创建了一个响应式对象 reactiveObj，然后使用 toRaw 把 reactiveObj 转换成了一个普通的 JavaScript 对象 rawObj。当我们修改 rawObj 的 age 属性时，reactiveObj 的 age 属性不会发生改变。
适用场景：
- 与第三方库交互： 有些第三方库可能不支持 Vue 的响应式对象，或者会因为 Vue 的响应式系统而出现问题。这时候，我们可以使用
toRaw把响应式对象转换成普通对象，然后再传递给第三方库。 - 性能优化： 在某些情况下，我们可能需要对响应式对象进行一些操作，但这些操作不需要触发响应式更新。这时候，我们可以使用
toRaw把响应式对象转换成普通对象，进行操作之后再手动更新响应式对象。 - 调试： 在调试 Vue 应用时，我们可能需要查看原始的数据对象，而不是响应式对象。这时候，我们可以使用
toRaw把响应式对象转换成普通对象，方便我们查看数据。
一个更复杂的例子：集成第三方图表库
假设我们使用一个第三方图表库 Chart.js 来绘制图表。Chart.js 期望接收一个普通的 JavaScript 对象作为数据源，而不是 Vue 的响应式对象。
import { ref, onMounted, toRaw } from 'vue';
import Chart from 'chart.js/auto'; // 引入 Chart.js
export default {
setup() {
const chartRef = ref(null);
const chartInstance = ref(null);
const chartData = ref({
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
});
onMounted(() => {
// 使用 toRaw 把 chartData 转换成普通对象
const rawChartData = toRaw(chartData.value);
chartInstance.value = new Chart(chartRef.value, {
type: 'bar',
data: rawChartData,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
// 模拟数据更新
const updateChart = () => {
chartData.value.datasets[0].data = [
Math.floor(Math.random() * 20),
Math.floor(Math.random() * 20),
Math.floor(Math.random() * 20),
Math.floor(Math.random() * 20),
Math.floor(Math.random() * 20),
Math.floor(Math.random() * 20)
];
// 手动更新 Chart.js 的数据
chartInstance.value.data = toRaw(chartData.value);
chartInstance.value.update();
};
return {
chartRef,
updateChart
};
},
template: `
<canvas ref="chartRef"></canvas>
<button @click="updateChart">更新图表</button>
`
};在这个例子里，我们首先使用 ref 创建了一个响应式对象 chartData，用于存储图表的数据。然后，在 onMounted 钩子函数中，我们使用 toRaw 把 chartData 转换成了一个普通的 JavaScript 对象 rawChartData，并把它传递给了 Chart.js。
当我们需要更新图表数据时，我们首先修改 chartData 的数据，然后使用 toRaw 把 chartData 转换成一个普通的 JavaScript 对象，并把它赋值给 chartInstance.value.data。最后，我们调用 chartInstance.value.update() 方法，手动更新图表。
markRaw 和 toRaw 的组合使用
在某些情况下，我们可以将 markRaw 和 toRaw 组合使用，以达到更好的效果。
import { reactive, toRaw, markRaw } from 'vue';
const rawData = {
id: 1,
name: '原始数据',
details: {
description: '一些描述信息'
}
};
// 使用 markRaw 标记 rawData，防止被 Vue 变成响应式的
markRaw(rawData);
const reactiveData = reactive({
...rawData, // 将原始数据混入响应式数据
count: 0
});
// 获取 reactiveData 的原始数据，用于传递给第三方库
const rawDataFromReactive = toRaw(reactiveData);
console.log(rawDataFromReactive === rawData); // true，因为 reactiveData 里的 rawData 部分仍然是原始对象在这个例子中，我们首先使用 markRaw 标记了 rawData，防止它被 Vue 变成响应式的。然后，我们使用 reactive 创建了一个响应式对象 reactiveData，并将 rawData 混入到 reactiveData 中。
由于 rawData 被 markRaw 标记了，所以即使它被混入到 reactiveData 中，它仍然是非响应式的。当我们使用 toRaw 获取 reactiveData 的原始数据时，我们会发现 reactiveData 里的 rawData 部分仍然是原始对象。
总结：markRaw 和 toRaw 的最佳实践
| 功能 | markRaw |
toRaw |
|---|---|---|
| 作用 | 阻止 Vue 将对象变成响应式的 | 将响应式对象转换成原始对象 |
| 使用场景 | 大型静态数据、第三方库数据、性能敏感场景 | 与第三方库交互、性能优化、调试 |
| 注意事项 | 只能标记对象，是浅标记 | 返回的是原始对象的引用，修改会影响原始对象（如果原始对象本身是可变的） |
总而言之，markRaw 和 toRaw 是 Vue 3 中两个非常有用的工具。它们可以帮助我们优化性能，提高代码的可维护性，并更好地与第三方库进行交互。 但是一定要记住它们各自的功能和适用场景，避免滥用，造成不必要的麻烦。
最后的忠告：
使用 markRaw 和 toRaw 就像使用一把锋利的刀，用好了可以事半功倍，用不好可能会伤到自己。因此，在使用它们之前，一定要充分了解它们的原理和注意事项，并在实际项目中进行充分的测试。
好了，今天的讲座就到这里。希望大家能够掌握 markRaw 和 toRaw 这两个小技巧，并在 Vue 3 项目中灵活运用，写出更高效、更优雅的代码！ 谢谢大家！