vue3中markRaw示例详解
更新时间：2024年04月01日 12:16:32 作者：Br不二
markRaw是将一个对象标记为普通对象,而toRaw是将reactive对象变为普通对象,在 Vue 3 中,markRaw 是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数,下面给大家介绍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>
请注意，即使 markedRawObject 的属性在模板中显示出来了，但由于它是原样对象，所以对其属性的修改不会触发视图的更新。而 reactiveObject 的属性修改则会触发视图的更新。
markRaw 的主要用途是当你确定某个对象不需要响应性时，避免不必要的性能开销和潜在的错误。这在处理第三方库、大型数据对象或性能敏感的场景中特别有用。
到此这篇关于vue3中markRaw示例详解的文章就介绍到这了,更多相关vue3 markRaw内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
-
这篇文章主要介绍了Vue实战之购物车详情页面的实现,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08 -
这篇文章主要介绍了初探Vue3.0 中的一大亮点Proxy的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12 -
今天小编就为大家分享一篇element UI upload组件上传附件格式限制方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09 -
这篇文章主要介绍的是Vue子组件与父组件，什么是父组件，什么是子组件很多时候面对这个问题我们都会有所混淆，下面文章我们就来详细介绍,需要的朋友可以参考一下2021-10-10 -
vue3提供了 mixins和extends，但是尝试之后发现这两种方法只支持纯OptionAPI，设置的data会被识别，但是设置的setup里return 的 reactive，完全无效，setup也没有被执行，这篇文章主要介绍了Vue3实现组件级基类的几种方法,需要的朋友可以参考下2023-04-04 -
Lambda函数,也称为匿名函数,是Vue3中的一种函数类型,绑定匿名方法和绑定普通方法主要是写法上的区别,其他的区别并不是很大,本文主要介绍了Vue3中使用匿名函数的方法实现,感兴趣的可以了解一下2023-12-12 -
这篇文章主要介绍了Vue+Mockjs模拟curd接口请求的示例详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07 -
这篇文章主要介绍了在vue中实现给每个页面顶部设置title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07 -
这篇文章主要介绍了element Drawer 抽屉无法渲染问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10 -
这篇文章主要给大家介绍了关于vue路由中前进后退的一些事儿，文中通过示例代码介绍的非常详细，对大家学习或者使用vue路由具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
最新评论