当前位置: 首页 > news >正文

Vue3响应式高阶用法之markRaw()

Vue3响应式高阶用法之markRaw()

文章目录

  • Vue3响应式高阶用法之markRaw()
  • 一、简介
  • 二、使用场景
    • 2.1 避免性能开销
    • 2.2 防止意外修改
  • 三、基本使用
    • 3.1 标记对象
  • 四、功能详解
    • 4.1 markRaw与reactive的区别
    • 4.2 markRaw与ref的区别
  • 五、最佳实践及案例
    • 5.1 使用大型第三方库对象
    • 5.2 静态配置数据
  • 六、总结

一、简介

在Vue3中,响应式系统是其核心特性之一,它允许我们轻松地管理和更新应用程序的状态。然而,有时我们需要排除某些对象,使其不被响应式系统追踪。markRaw()就是为此目的而设计的。本文将详细介绍markRaw()的作用、使用场景及最佳实践。

二、使用场景

2.1 避免性能开销

在某些情况下,我们可能不希望某个对象被Vue的响应式系统追踪,以避免不必要的性能开销。例如,大型的第三方库对象或不需要响应式的静态数据。

2.2 防止意外修改

有些对象在应用程序的生命周期中不应该被修改。通过markRaw()可以确保这些对象不会被意外地转换为响应式,从而避免不必要的状态变更。

三、基本使用

3.1 标记对象

markRaw()的主要作用是标记一个对象,使其不再被reactiveshallowReactive转换为响应式代理。

<script lang="ts" setup>import { markRaw, reactive } from 'vue';const someObject = { name: '天天鸭' };const markedObject = markRaw(someObject);// 即使使用 reactive,markedObject 也不会变成响应式const state = reactive({ obj: markedObject });
</script>

在上面的例子中,markedObject即使被包裹在reactive中,也不会变成响应式对象。

四、功能详解

4.1 markRaw与reactive的区别

reactive会将整个对象转换为响应式代理,而markRaw则会阻止这种转换。

4.2 markRaw与ref的区别

ref主要用于创建一个响应式引用,它可以封装任何类型的值如字符串、数字和对象。当你将一个对象放入ref时,ref本身依然是响应式的,而markRaw的作用是阻止对象被转换为响应式,这和ref的设计不匹配。

<script lang="ts" setup>import { ref, markRaw } from 'vue';const someObject = { name: '天天鸭' };const rawObject = markRaw(someObject);const stateRef = ref(rawObject);// ref 本身是响应式的,但 rawObject 不会被转换为响应式stateRef.value.name = '天天鹅'; // 这不会触发响应式更新
</script>

五、最佳实践及案例

5.1 使用大型第三方库对象

在使用大型第三方库(如图表库、地图库)时,可以使用markRaw()避免这些对象被Vue的响应式系统追踪,从而提高性能。

<script lang="ts" setup>import { markRaw } from 'vue';import * as echarts from 'echarts';const chartInstance = markRaw(echarts.init(document.getElementById('chart')));
</script>

5.2 静态配置数据

对于一些静态配置数据,可以使用markRaw()确保它们不会被意外修改。

<script lang="ts" setup>import { markRaw } from 'vue';const config = markRaw({apiEndpoint: 'https://api.example.com',timeout: 5000});
</script>

六、总结

markRaw()是Vue3中一个非常有用的工具,特别是在需要控制对象的响应式行为时。通过合理地使用markRaw(),我们可以避免不必要的性能开销和防止意外的状态变更,从而更好地管理应用程序的状态。

希望本文能帮助你更好地理解和使用markRaw(),提升你的Vue3开发体验。如果你有任何问题或建议,欢迎在评论区留言讨论。

相关文章:

Vue3响应式高阶用法之markRaw()

Vue3响应式高阶用法之markRaw() 文章目录 Vue3响应式高阶用法之markRaw()一、简介二、使用场景2.1 避免性能开销2.2 防止意外修改 三、基本使用3.1 标记对象 四、功能详解4.1 markRaw与reactive的区别4.2 markRaw与ref的区别 五、最佳实践及案例5.1 使用大型第三方库对象5.2 静…...

免费SSL证书的安全性与获取指南

SSL证书是一种数字凭证&#xff0c;用于加密用户与网站之间的信息交换&#xff0c;以确保传输的数据不被第三方窃取。它像是一个数字版的密封印章&#xff0c;为数据的传输过程提供了一层保护膜。 免费的SSL证书通常由CA机构提供&#xff0c;它们同样可以提供基础数据的加密服…...

【CN】Argo 持续集成和交付(一)

1.简介 Argo 英 [ˈɑ:ɡəu] 美 [ˈɑrˌɡo] Kubernetes 原生工具&#xff0c;用于运行工作流程、管理集群以及正确执行 GitOps。 Argo 于 2020 年 3 月 26 日被 CNCF 接受为孵化成熟度级别&#xff0c;然后于 2022 年 12 月 6 日转移到毕业成熟度级别。 argoproj.github.i…...

Unity3D 自定义Debug双击溯源问题详解

前言 在Unity3D的开发过程中&#xff0c;经常需要处理各种交互和事件&#xff0c;其中双击事件是常见的需求之一。然而&#xff0c;由于Unity自带的双击检测机制并不完善&#xff0c;开发者往往需要自定义实现以满足特定需求。本文将详细介绍如何在Unity3D中自定义Debug双击溯…...

环境搭建-Docker搭建ClickHouse

Docker搭建ClickHouse 一、前言二、ClickHouse安装2.1 拉取镜像运行ClickHouse服务 三、测试安装3.1 进入clickhouse容器3.2 命令补充说明 四、测试连接五、设置CK的用户名密码 一、前言 本文使用的Docker使用Windows搭建&#xff0c;Linux版本的搭建方式一样。 Windows系统搭…...

深入理解CSS中的变量(概念篇)

CSS变量,也称为自定义属性,是一种在CSS中定义和重用值的方式。它们允许开发者在一个地方定义样式值,然后在整个样式表中引用这些值,从而提高代码的可维护性和可读性。 1、定义和使用CSS变量 CSS变量的定义和使用非常简单。变量名以两个连字符开头,变量值为任何有效的CSS…...

Prometheus 监控Tomcat等java应用的状态

5月应用服务出现问题&#xff0c;当别的小伙伴问我&#xff0c;有没有Tomcat等应用状态的监控的时候&#xff0c;我有点儿尴尬。所以赶紧抽空部署一下。 在配置之前&#xff0c;就当已经会安装jdk和tomcat了。 一、下载jmx_exporter #linux下 cd /usr/local/prometheus wget …...

c++中的斐波那契数列(Fibonacci Sequence)和背包问题(Knapsack Problem)

前言 hello&#xff0c;大家好啊&#xff0c;我是文宇&#xff0c;不是文字&#xff0c;是文宇哦。 斐波那契数列&#xff08;Fibonacci Sequence&#xff09; 斐波那契数列&#xff08;Fibonacci Sequence&#xff09;是一个经典的数学问题&#xff0c;其中每个数都是前两个…...

connect的非阻塞模式

本文参考&#xff1a;connect 函数在阻塞和非阻塞模式下的行为 一般情况下&#xff0c;在使用connect连接服务端时&#xff0c;需要等待一会儿才会函数才会返回&#xff0c;导致程序阻塞。为了降低阻塞的影响&#xff0c;我们可能会单独开个线程处理connect请求&#xff0c;例…...

jenkins面试题全集

1. 简述什么是Jenkins &#xff1f; Jenkins是一个开源的持续集成的服务器&#xff0c;Jenkins开源帮助我们自动构建各类项目。 Jenkins强大的插件式&#xff0c;使得Jenkins可以集成很多软件&#xff0c;可以帮助我们持续集成我们的工程项目&#xff0c;对于我们测试来说&…...

Python中最好学和最实用的有哪些库和框架

Python拥有丰富的库和框架&#xff0c;这些库和框架覆盖了从数据处理、科学计算、Web开发到机器学习等多个领域。以下是一些值得学习的Python库和框架&#xff1a; 数据处理与科学计算 NumPy 描述&#xff1a;NumPy是Python中用于科学计算的一个库&#xff0c;它提供了一个强…...

文件解析的终极工具:Apache Tika

文件解析的终极工具&#xff1a;Apache Tika Apache Tika 简介 Apache Tika 是一个开源的、跨平台的库&#xff0c;用于检测、提取和解析各种类型文件的元数据。 它支持多种文件格式&#xff0c;包括文档、图片、音频和视频。 Tika是一个底层库&#xff0c;经常用于搜索引擎…...

Hadoop 重要监控指标

某安卓逆向课程打包下载&#xff08;92节课&#xff09; ​​https://pan.quark.cn/s/53cec8b8055a ​​ 某PC逆向课程&#xff08;100节课打包下载&#xff09; ​​https://pan.quark.cn/s/e38f2b24f36c​​ Hadoop 是一个开源的分布式存储和计算框架&#xff0c;广泛应用…...

oracle 查询锁表

oracle 查询锁表 SELECT o.object_name, s.sid, s.serial#, p.spid, s.username, s.program FROM v l o c k e d o b j e c t l J O I N d b a o b j e c t s o O N l . o b j e c t i d o . o b j e c t i d J O I N v locked_object l JOIN dba_objects o ON l.object_id …...

进程概念(三)----- fork 初识

目录 前言1. pid && ppid2. forka. 为什么 fork 要给子进程返回 0&#xff0c; 给父进程返回子进程的 pid &#xff1f;b. 一个函数是如何做到两次的&#xff1f;c. fork 函数在干什么&#xff1f;d. 一个变量怎么做到拥有不同的内容的&#xff1f;e. 拓展&#xff1a;…...

huawei 路由 RIP 协议中三种定时器的工作原理

RFC2453 定义的三种 RIP 协议定时器 更新定时器&#xff08;Update Timer&#xff09;&#xff1a;用于触发更新报文的发送&#xff0c;超时时间为 30 秒。老化定时器&#xff08;Age Timer&#xff09;&#xff1a;如果在老化时间内没有收到邻居发送的响应报文&#xff0c;则…...

HTML常见标签——超链接a标签

一、a标签简介 二、a标签属性 href属性 target属性 三、a标签的作用 利用a标签进行页面跳转 利用a标签返回页面顶部以及跳转页面指定区域 利用a标签实现文件下载 一、a标签简介 <a>标签用于做跳转、导航&#xff0c;是双标签&#xff0c;记作<a></a>&#…...

Python 爬虫入门(一):从零开始学爬虫 「详细介绍」

Python 爬虫入门&#xff08;一&#xff09;&#xff1a;从零开始学爬虫 「详细介绍」 前言1.爬虫概念1.1 什么是爬虫&#xff1f;1.2 爬虫的工作原理 2. HTTP 简述2.1 什么是 HTTP&#xff1f;2.2 HTTP 请求2.3 HTTP 响应2.4 常见的 HTTP 方法 3. 网页的组成3.1 HTML3.2 CSS3.…...

Linux嵌入式学习——数据结构——概念和Seqlist

数据结构 相互之间存在一种或多种特定关系的数据元素的集合。 逻辑结构 集合&#xff0c;所有数据在同一个集合中&#xff0c;关系平等。 线性&#xff0c;数据和数据之间是一对一的关系。数组就是线性表的一种。 树&#xff0c; 一对多 图&#xff0c;多对多 …...

iOS ------ Block的相关问题

Block的定义 Block可以截获局部变量的匿名函数&#xff0c; 是将函数及其执行上下文封装起来的对象。 Block的实现 通过Clang将以下的OC代码转化为C代码 // Clang xcrun -sdk iphoneos clang -arch arm64 -rewrite-objc main.m//main.m #import <Foundation/Foundation.…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...