0


Vue 3中toRaw和markRaw的使用

文章目录

在这里插入图片描述

🎉欢迎来到Java学习路线专栏~探索Java中的静态变量与实例变量


  • ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹
  • ✨博客主页:IT·陈寒的博客
  • 🎈该系列文章专栏:Java学习路线
  • 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习
  • 🍹文章作者技术和水平有限,如果文中出现错误,希望大家能指正🙏
  • 📜 欢迎大家关注! ❤️

Vue是一个流行的JavaScript框架,广泛用于构建现代Web应用程序。Vue 3引入了一些新的响应性API,其中包括

toRaw

markRaw

。这些API允许您更精细地控制Vue的响应性系统。本文将深入探讨

toRaw

markRaw

的使用,以及它们如何帮助您更好地管理您的Vue 3应用程序。
在这里插入图片描述

Vue 3的响应性系统

在Vue 3中,响应性系统是构建动态Web应用程序的关键部分。Vue使用响应性系统来跟踪依赖关系,使数据更改能够自动更新视图。这使得Vue应用程序在数据变化时能够高效地更新DOM。Vue 3引入了新的

Proxy

对象来替代Vue 2中的

Object.defineProperty

Proxy

对象允许更细粒度的拦截和控制属性的访问和修改。这使得Vue的响应性系统更加灵活和高效。然而,有时候过于灵活也可能导致问题。Vue的响应性系统可能会在某些情况下过度追踪依赖,这可能会导致不必要的性能开销。为了解决这个问题,Vue 3引入了

toRaw

markRaw

这两个新的API。

使用

toRaw
toRaw

是Vue 3中的一个全局函数,它接受一个

reactive

ref

对象,并返回该对象的原始不代理版本。这个函数非常有用,当您需要直接访问对象的原始版本而不触发代理的

getter

方法时。考虑以下示例:

javascriptimport { reactive, toRaw } from 'vue';const original = { name: 'John' };const proxy = reactive(original);console.log(proxy.name); // Johnconsole.log(toRaw(proxy).name); // John

在这个示例中,我们首先创建了一个名为

original

的普通JavaScript对象。然后,我们使用

reactive

将其转换为代理对象

proxy

。最后,我们使用

toRaw

来获取

proxy

的原始版本,从而绕过了代理。这种操作可能在某些情况下非常有用,特别是当您需要与不理解Vue的第三方库或原生DOM操作进行交互时。通过使用

toRaw

,您可以确保您访问的是对象的真实版本。

使用

markRaw
markRaw

是另一个全局函数,它用于标记一个对象,使其永远不会被代理。这在需要排除特定对象的响应性时非常有用,因为它可以显著提高性能。以下是

markRaw

的使用示例:

javascriptimport { reactive, markRaw } from 'vue';const original = markRaw({ name: 'John' });const proxy = reactive(original);console.log(proxy.name); // Johnproxy.name = 'Doe'; // This will not trigger reactivity

在这个示例中,我们使用

markRaw

来创建一个原始对象

original

,它不会被代理。然后,我们使用

reactive

将其转换为代理对象

proxy

。但是请注意,尽管

proxy

是响应性的,但

original

的修改不会触发代理的更新。这对于标记不需要响应性的对象非常有用,以减少不必要的性能开销。

使用场景

下面我们将讨论一些

toRaw

markRaw

的实际使用场景。

1. 与第三方库交互

当您需要将Vue应用程序与不支持Vue的第三方库或原生浏览器API集成时,

toRaw

markRaw

非常有用。您可以使用

toRaw

访问Vue代理对象的原始版本,以便与这些库进行交互。

2. 提高性能

有些对象可能不需要响应性。例如,静态配置对象或缓存数据通常不需要被Vue的响应性系统追踪。通过使用

markRaw

标记这些对象,您可以减少不必要的性能开销。

3. 避免无限循环

有时代理对象的递归引用可能导致无限循环,这会占用大量内存并导致程序崩溃。使用

markRaw

可以防止这种情况的发生。

总结

toRaw

markRaw

是Vue 3中引入的新API,用于更精细地控制对象的代理和响应性。它们提供了在需要时绕过代理或禁用响应性的能力,有助于提高性能和更好地与第三方库进行集成。理解如何正确使用这些API对于构建高性能和灵活的Vue 3应用程序非常重要。根据您的具体需求,您可以选择是绕过代理对象,提高性能,还是禁用响应性,以便更好地管理您的应用程序状态。希望本文能帮助您更好地理解

toRaw

markRaw

的使用。


🧸结尾 ❤️ 感谢您的支持和鼓励! 😊🙏
📜您可能感兴趣的内容:

  • 【Java面试技巧】Java面试八股文 - 掌握面试必备知识(目录篇)
  • 【Java学习路线】2023年完整版Java学习路线图
  • 【AIGC人工智能】Chat GPT是什么,初学者怎么使用Chat GPT,需要注意些什么
  • 【Java实战项目】SpringBoot+SSM实战:打造高效便捷的企业级Java外卖订购系统
  • 【数据结构学习】从零起步:学习数据结构的完整路径

在这里插入图片描述

标签: java vue.js 前端

本文转载自: https://blog.csdn.net/qq_43546721/article/details/134003012
版权归原作者 IT·陈寒 所有, 如有侵权,请联系我们删除。

“Vue 3中toRaw和markRaw的使用”的评论:

还没有评论