vue3中markRaw示例详解

陈玉春

在 Vue 3 中，

1. markRaw

复制代码

是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数。当你有一个对象，并且你确定你不需要它成为响应性对象时，你可以使用

1. markRaw

复制代码

来标记它。这在一些场景中非常有用，比如当你需要集成一个第三方库或插件，并且这个库或插件的某些部分不需要是响应性的。
下面是一个详细的示例，展示了如何在 Vue 3 中使用

1. markRaw

复制代码

：

1. import { reactive, markRaw, toRefs } from 'vue';
   
2. // 创建一个普通的 JavaScript 对象
   
3. const rawObject = {
   
4.   name: 'Raw Object',
   
5.   value: 'This is a raw object and it will not be reactive.'
   
6. };
   
7. // 使用 markRaw 标记这个对象，使其保持原样
   
8. const markedRawObject = markRaw(rawObject);
   
9. // 创建一个响应性对象
   
10. const state = reactive({
    
11.   // 将标记过的 rawObject 放入响应性对象中
    
12.   markedRawObject,
    
13.   // 另一个普通的对象，它会被转换为响应性对象
    
14.   reactiveObject: {
    
15.     name: 'Reactive Object',
    
16.     value: 'This is a reactive object and it will track changes.'
    
17.   }
    
18. });
    
19. // 在组件中使用这些对象
    
20. export default {
    
21.   setup() {
    
22.     // 使用 toRefs 来解构响应性对象的属性，以便在模板中直接使用
    
23.     const { markedRawObject, reactiveObject } = toRefs(state);
    
24.     // 由于 markedRawObject 是被 markRaw 标记过的，修改它不会触发 Vue 的响应性系统
    
25.     markedRawObject.value.name = 'Modified Raw Object'; // 这不会触发更新
    
26.     // 修改 reactiveObject 则会触发 Vue 的响应性更新
    
27.     reactiveObject.value.name = 'Modified Reactive Object'; // 这会触发更新
    
28.     // 返回这些属性，以便在模板中使用
    
29.     return {
    
30.       markedRawObject,
    
31.       reactiveObject
    
32.     };
    
33.   }
    
34. };

复制代码

在上面的代码中，我们创建了一个普通的 JavaScript 对象

1. rawObject

复制代码

，并使用

1. markRaw

复制代码

函数将其标记为原样对象。然后，我们将这个标记过的对象放入一个响应性对象

1. state

复制代码

中。在组件的

1. setup

复制代码

函数中，我们解构出

1. markedRawObject

复制代码

和

1. reactiveObject

复制代码

，并尝试修改它们的属性。由于

1. markedRawObject

复制代码

是被

1. markRaw

复制代码

标记过的，所以修改它的属性不会触发 Vue 的响应性系统。而修改

1. reactiveObject

复制代码

的属性则会触发响应性更新。
在模板中，你可以像这样使用这些属性：

1. <template>
   
2.   <div>
   
3.     <p>Marked Raw Object: {{ markedRawObject.name }} - {{ markedRawObject.value }}</p>
   
4.     <p>Reactive Object: {{ reactiveObject.name }} - {{ reactiveObject.value }}</p>
   
5.   </div>
   
6. </template>

复制代码

请注意，即使

1. markedRawObject

复制代码

的属性在模板中显示出来了，但由于它是原样对象，所以对其属性的修改不会触发视图的更新。而

1. reactiveObject

复制代码

的属性修改则会触发视图的更新。

1. markRaw

复制代码

的主要用途是当你确定某个对象不需要响应性时，避免不必要的性能开销和潜在的错误。这在处理第三方库、大型数据对象或性能敏感的场景中特别有用。
到此这篇关于vue3中markRaw示例详解的文章就介绍到这了,更多相关vue3 markRaw内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3190564t7.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！