markRaw 是 Vue 3 中的一个函数，用于标记对象，使其不被 Vue 的响应式系统追踪。通常在以下场景中使用 markRaw：
- 性能优化：当你有一个大对象或复杂的数据结构，并且不希望它被 Vue 的响应式系统追踪，以避免性能开销。
- 第三方库对象：当你使用第三方库的对象，并且这些对象不需要响应式行为，或者会与 Vue 的响应式系统产生冲突。
示例 1：性能优化
假设你有一个非常大的对象，并且你确定它不需要响应式特性。你可以使用 markRaw 来标记它，以避免 Vue 的响应式系统对其进行追踪。
<template>
<div>
<h1>MarkRaw Example: Performance Optimization</h1>
<button @click="updateNonReactiveObject">Update Non-Reactive Object</button>
<button @click="updateReactiveObject">Update Reactive Object</button>
</div>
</template>
<script>
import { ref, markRaw } from 'vue';
export default {
name: 'App',
setup() {
// 创建一个非常大的对象
const largeObject = { data: Array(1000000).fill(0) };
// 使用 markRaw 标记对象，使其不被 Vue 的响应式系统追踪
const nonReactiveObject = markRaw(largeObject);
// 创建一个响应式对象
const reactiveObject = ref(largeObject);
const updateNonReactiveObject = () => {
// 更新非响应式对象
nonReactiveObject.data[0] = 1;
console.log('Non-Reactive Object Updated');
};
const updateReactiveObject = () => {
// 更新响应式对象
reactiveObject.value.data[0] = 1;
console.log('Reactive Object Updated');
};
return {
updateNonReactiveObject,
updateReactiveObject,
};
},
};
</script>
在这个示例中，nonReactiveObject 不会被 Vue 的响应式系统追踪，因此更新它不会触发任何响应式更新。这对性能有很大的帮助，特别是当对象非常大时。
示例 2：第三方库对象
假设你在项目中使用了一个第三方库，并且这个库的对象不需要响应式特性，或者其内部实现与 Vue 的响应式系统有冲突。在这种情况下，可以使用 markRaw。
<template>
<div>
<h1>MarkRaw Example: Third-Party Library Object</h1>
<button @click="useThirdPartyObject">Use Third-Party Object</button>
</div>
</template>
<script>
import { ref, markRaw } from 'vue';
// 假设这是一个第三方库的对象
import ThirdPartyLibrary from 'third-party-library';
export default {
name: 'App',
setup() {
// 创建第三方库对象
const thirdPartyObject = new ThirdPartyLibrary();
// 使用 markRaw 标记对象，使其不被 Vue 的响应式系统追踪
const nonReactiveThirdPartyObject = markRaw(thirdPartyObject);
const useThirdPartyObject = () => {
// 使用非响应式的第三方库对象
nonReactiveThirdPartyObject.someMethod();
console.log('Used Third-Party Object');
};
return {
useThirdPartyObject,
};
},
};
</script>
在这个示例中，nonReactiveThirdPartyObject 不会被 Vue 的响应式系统追踪，因此可以安全地使用第三方库的对象，而不必担心与 Vue 的响应式系统产生冲突。
示例 3：复杂数据结构
假设你有一个复杂的数据结构，例如一个包含函数、类实例或其他不可响应的对象的数组。在这种情况下，可以使用 markRaw。
<template>
<div>
<h1>MarkRaw Example: Complex Data Structure</h1>
<button @click="addNonReactiveItem">Add Non-Reactive Item</button>
<button @click="addReactiveItem">Add Reactive Item</button>
</div>
</template>
<script>
import { ref, markRaw } from 'vue';
class CustomClass {
constructor(value) {
this.value = value;
}
someMethod() {
console.log('CustomClass method called');
}
}
export default {
name: 'App',
setup() {
const complexArray = ref([]);
const addNonReactiveItem = () => {
// 创建一个类实例
const item = new CustomClass('Non-Reactive Item');
// 使用 markRaw 标记对象，使其不被 Vue 的响应式系统追踪
complexArray.value.push(markRaw(item));
console.log('Added Non-Reactive Item');
};
const addReactiveItem = () => {
// 创建一个类实例
const item = new CustomClass('Reactive Item');
// 直接添加到响应式数组中
complexArray.value.push(item);
console.log('Added Reactive Item');
};
return {
addNonReactiveItem,
addReactiveItem,
};
},
};
</script>
在这个示例中，addNonReactiveItem 方法将一个标记为非响应式的类实例添加到数组中，而 addReactiveItem 方法将一个普通的类实例添加到数组中。通过这种方式，你可以控制哪些对象需要响应式特性，哪些不需要。
markRaw 是 Vue 3 中一个非常有用的工具，特别是在处理大对象、第三方库对象或复杂数据结构时。通过合理使用 markRaw，可以优化性能，避免与 Vue 的响应式系统产生冲突，并更好地控制应用的响应式行为。
