当前位置: 首页 > 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.…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...