vue3中markRaw详解

本文主要是介绍vue3中markRaw详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在 Vue 3 中，markRaw 是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数。当你有一个对象，并且你确定你不需要它成为响应性对象时，你可以使用 markRaw 来标记它。这在一些场景中非常有用，比如当你需要集成一个第三方库或插件，并且这个库或插件的某些部分不需要是响应性的。

下面是一个详细的示例，展示了如何在 Vue 3 中使用 markRaw：

import { reactive, markRaw, toRefs } from 'vue';// 创建一个普通的 JavaScript 对象
const rawObject = {name: 'Raw Object',value: 'This is a raw object and it will not be reactive.'
};// 使用 markRaw 标记这个对象，使其保持原样
const markedRawObject = markRaw(rawObject);// 创建一个响应性对象
const state = reactive({// 将标记过的 rawObject 放入响应性对象中markedRawObject,// 另一个普通的对象，它会被转换为响应性对象reactiveObject: {name: 'Reactive Object',value: 'This is a reactive object and it will track changes.'}
});// 在组件中使用这些对象
export default {setup() {// 使用 toRefs 来解构响应性对象的属性，以便在模板中直接使用const { markedRawObject, reactiveObject } = toRefs(state);// 由于 markedRawObject 是被 markRaw 标记过的，修改它不会触发 Vue 的响应性系统markedRawObject.value.name = 'Modified Raw Object'; // 这不会触发更新// 修改 reactiveObject 则会触发 Vue 的响应性更新reactiveObject.value.name = 'Modified Reactive Object'; // 这会触发更新// 返回这些属性，以便在模板中使用return {markedRawObject,reactiveObject};}
};

在上面的代码中，我们创建了一个普通的 JavaScript 对象 rawObject，并使用 markRaw 函数将其标记为原样对象。然后，我们将这个标记过的对象放入一个响应性对象 state 中。在组件的 setup 函数中，我们解构出 markedRawObject 和 reactiveObject，并尝试修改它们的属性。由于 markedRawObject 是被 markRaw 标记过的，所以修改它的属性不会触发 Vue 的响应性系统。而修改 reactiveObject 的属性则会触发响应性更新。

在模板中，你可以像这样使用这些属性：

<template><div><p>Marked Raw Object: {{ markedRawObject.name }} - {{ markedRawObject.value }}</p><p>Reactive Object: {{ reactiveObject.name }} - {{ reactiveObject.value }}</p></div>
</template>