Vue 中的 ref 与 reactive:让你的应用更具响应性(中)
🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
- 四、 ref 与 reactive 的比较
- 比较 ref 和 reactive 的相似之处和不同之处
- 分析在不同场景下使用 ref 或 reactive 的优势
- 五、结合使用 ref 与 reactive
- 介绍如何将 ref 和 reactive 结合使用
- 展示一些常见的结合使用场景
四、 ref 与 reactive 的比较
比较 ref 和 reactive 的相似之处和不同之处
下面是对 ref 和 reactive 的相似之处和不同之处的详细比较:
ref | reactive | |
---|---|---|
用法 | 创建单一响应式数据 | 创建复杂的响应式对象 |
响应式绑定 | 值通过 value 属性访问 | 直接访问和修改对象的属性 |
自动解包 | 不会自动解包 | 会自动解包,可以直接访问和修改内部的属性 |
更新触发 | 使用 .value 属性赋值 | 直接修改对象的属性来触发更新 |
嵌套响应式对象 | 需要手动创建嵌套的响应式对象 | 可以自动追踪和处理嵌套的响应式对象 |
监听器 | 需要通过监听 .value 属性变化 | 可以通过 watch API 或 effect 进行监听和响应变化 |
组件中的使用 | 可作为单个值响应式数据使用 | 通常用于创建组件的响应式数据和响应式副作用 |
需要注意的是,ref
和 reactive
都是用于创建响应式数据的 API,在不同的应用场景下使用。ref
适用于单个响应式值的简单情况,而 reactive
则更适合处理复杂的响应式对象和嵌套数据结构。根据具体的需求和场景,选择合适的 API 进行使用。
分析在不同场景下使用 ref 或 reactive 的优势
在 Vue 3 中,ref
和 reactive
是用于处理响应式数据的两个重要特性。它们在不同的场景下具有各自的优势,下面对它们进行简单分析:
ref
的优势:
- 获取原始值:使用
ref
可以直接获取到原始值,而不经过响应式系统的转换。这在一些需要直接操作原始数据的场景中非常有用。 - 性能优势:由于
ref
不依赖于响应式系统,因此在一些性能敏感的场景下,使用ref
可以提供更好的性能。 - 与第三方库集成:如果你正在使用一些第三方库,它们可能需要直接操作 DOM 元素或其他非响应式的数据,这时使用
ref
可以更方便地与这些库进行集成。
reactive
的优势:
- 响应式数据:使用
reactive
创建的对象是响应式的,当数据发生变化时,相关的组件会自动更新。这对于处理复杂的数据结构和状态非常有用。 - 模板内计算属性:可以将
reactive
对象与计算属性结合使用,在模板中创建动态的计算。 - 组件间数据共享:通过使用
reactive
创建响应式数据,可以在组件之间共享数据,并且当数据发生变化时,相关的组件会自动更新。
综上所述,选择使用 ref
还是 reactive
取决于具体的场景和需求。如果你需要直接操作原始数据、追求更好的性能,或者与第三方库集成,那么使用 ref
可能更合适。而如果你需要处理复杂的数据结构、实现响应式数据和组件间数据共享,那么使用 reactive
将是更好的选择。
五、结合使用 ref 与 reactive
介绍如何将 ref 和 reactive 结合使用
在 Vue 3 中,你可以将 ref
和 reactive
结合起来使用,以便在组件或元素中使用响应式对象和引用来操作 DOM 元素。下面是一个简单的示例,展示了如何在 Vue 3 中将 ref
和 reactive
结合起来使用。
- 首先,在 Vue 3 中,你需要使用
defineComponent
方法来定义一个组件,例如:
import { defineComponent } from 'vue';export default defineComponent({
name: 'MyComponent',
setup() {// 在这里编写组件的逻辑
},
});
- 接下来,你可以使用
reactive
方法来创建一个响应式对象,例如:
import { reactive } from 'vue';export default defineComponent({
name: 'MyComponent',
setup() {const state = reactive({count: 0,message: 'Hello, Vue 3!',});// 你可以使用这个对象,例如:return {state,};
},
});
在这个示例中,我们使用 reactive
方法创建了一个名为 state
的响应式对象,并将其初始值设置为 { count: 0, message: 'Hello, Vue 3!' }
。然后,我们将这个对象返回给组件,以便在模板中使用它。
- 在模板中,你可以使用
v-bind
指令将响应式对象绑定到 DOM 元素,例如:
<template>
<div><p>Count: {{ state.count }}</p><p>Message: {{ state.message }}</p><button v-bind="state">Increment</button>
</div>
</template>
在这个示例中,我们将 state
对象绑定到 <p>
元素和一个按钮上。当用户点击按钮时,state
对象的 count
属性会增加,而 message
属性不会改变。
- 接下来,你可以使用
ref
方法来创建一个引用,例如:
import { ref } from 'vue';export default defineComponent({
name: 'MyComponent',
setup() {const countRef = ref(0);// 你可以使用这个引用,例如:return {state,countRef,};
},
});
在这个示例中,我们使用 ref
方法创建了一个名为 countRef
的引用,并将其初始值设置为 0
。然后,我们将这个引用返回给组件,以便在模板中使用它。
- 在模板中,你可以使用
v-bind
指令将引用绑定到 DOM 元素,例如:
<template>
<div><p>Count: {{ countRef }}</p><button v-bind="countRef">Increment</button>
</div>
</template>
在这个示例中,我们将 countRef
引用绑定到 <p>
元素和一个按钮上。当用户点击按钮时,countRef
的值会增加。
- 最后,你可以使用
ref
引用来操作组件或元素的属性,例如:
import { ref } from 'vue';export default defineComponent({
name: 'MyComponent',
setup() {const countRef = ref(0);function increment() {countRef.value++;}return {state,countRef,increment,};
},
});
在这个示例中,我们定义了一个名为 increment
的函数,用于增加 countRef
的值。然后,我们将这个函数返回给组件,以便在模板中使用它。
总的来说,在 Vue 3 中将 ref
和 reactive
结合起来使用可以让你更加方便地操作响应式对象和引用来操作 DOM 元素,从而提高开发效率和应用程序性能。
展示一些常见的结合使用场景
以下是 Vue 3 中一些常见的将 ref
和 reactive
结合使用的场景:
- 获取对组件或元素的引用:你可以使用
ref
方法来获取对组件或元素的引用,以便在组件或元素的双向绑定中使用。例如:
import { ref } from 'vue';export default defineComponent({name: 'MyComponent',setup() {const countRef = ref(0);return {countRef,};},
});
- 操作组件或元素的属性:你可以使用
ref
引用来操作组件或元素的属性,例如:
import { ref } from 'vue';export default defineComponent({name: 'MyComponent',setup() {const countRef = ref(0);function increment() {countRef.value++;}return {countRef,increment,};},
});
- 获取对多个组件或元素的引用:你可以使用
ref
方法来获取对多个组件或元素的引用,例如:
import { ref } from 'vue';export default defineComponent({name: 'MyComponent',setup() {const countRef = ref(0);const messageRef = ref('Hello, Vue 3!');return {countRef,messageRef,};},
});
- 操作响应式对象:你可以使用
reactive
方法来创建一个响应式对象,并使用ref
方法来获取对它的引用,以便在组件或元素的双向绑定中使用。例如:
import { reactive, ref } from 'vue';export default defineComponent({name: 'MyComponent',setup() {const state = reactive({count: 0,message: 'Hello, Vue 3!',});const countRef = ref(state.count);function increment() {state.count++;}return {state,countRef,increment,};},
});
- 操作响应式对象中的多个属性:你可以使用
reactive
方法来创建一个响应式对象,并使用ref
方法来获取对它的引用,以便操作响应式对象中的多个属性。例如:
import { reactive, ref } from 'vue';export default defineComponent({name: 'MyComponent',setup() {const state = reactive({count: 0,message: 'Hello, Vue 3!',});const countRef = ref(state.count);const messageRef = ref(state.message);function increment() {state.count++;}return {state,countRef,messageRef,increment,};},
});
总的来说,将 ref
和 reactive
结合起来使用可以让你更加方便地操作响应式对象和引用来操作 DOM 元素,从而提高开发效率和应用程序性能。
相关文章:

Vue 中的 ref 与 reactive:让你的应用更具响应性(中)
🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…...

【数据库基础】Mysql与Redis的区别
看到一篇不错的关于“Mysql与Redis的区别”的文章,转过来记录下~ 文章目录 一、数据库类型二、运行机制三、什么是缓存数据库呢?四、优缺点比较五、区别总结六、数据可以全部直接用Redis储存吗?参考资料 一、数据库类型 Redis:NOS…...

JVM工作原理与实战(六):类的生命周期-连接阶段
专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、类的生命周期 1.加载(Loading) 2.连接(Linking) 3.初始化(Initialization) 4.使用(Using&…...
【OCR】 - Tesseract OCR在Windows系统中安装
Tesseract OCR 在Windows环境下安装Tesseract OCR(Optical Character Recognition)通常包括以下几个步骤: 下载Tesseract 访问Tesseract的GitHub发布页面:https://github.com/tesseract-ocr/tesseract/releases找到适合你操作系…...

YOLOv8改进 | 损失函数篇 | SlideLoss、FocalLoss分类损失函数助力细节涨点(全网最全)
一、本文介绍 本文给大家带来的是分类损失 SlideLoss、VFLoss、FocalLoss损失函数,我们之前看那的那些IoU都是边界框回归损失,和本文的修改内容并不冲突,所以大家可以知道损失函数分为两种一种是分类损失另一种是边界框回归损失,上一篇文章里面我们总结了过去百分之九十的…...
计算机网络试题——填空题(附答案)
在OSI模型中,第一层是____________层。 答案:物理(Physical) TCP协议是一种_____________连接的协议。 答案:面向连接(Connection-oriented) IPv6地址的位数是____________。 答案:1…...

第二证券:股票私募仓位指数创近八周新高
1月8日,A股几大首要指数全线收跌,上证指数收于日内最低点2887.54点,间隔上一年5月份的阶段高点3418.95点现已跌去了15.54%。 不过,虽然商场仍未清晰止跌,私募基金们却现已进场“抄底”。私募排排网最新发布的私募仓位…...
35-javascript基础,引入方式;变量命名规范
html分为三部分;结构html,表现css,行为js;js就是javascript js包含三部分: ECMAScript:简称ES,ES5,ES6核心语法 DOM:获取和操作html元素的标准方法;BOM&am…...

笔试案例2
文章目录 1、笔试案例22、思维导图 1、笔试案例2 09)查询学过「张三」老师授课的同学的信息 selects.*,c.cname,t.tname,sc.score from t_mysql_teacher t, t_mysql_course c, t_mysql_student s, t_mysql_score sc where t.tidc.cid and c.cidsc.cid and sc.sids…...
【嵌入式-网络编程】vmware中使用UDP广播失败问题
问题描述: 自己在vmware中搭建了2台虚拟机,虚拟机A向虚拟机A和虚拟机B发送广播信息,接收端在虚拟机A和虚拟机B,这个时候,由于没配置sin.sin_addr.s_addr htonl(INADDR_ANY);,而是配置的inet_pton(AF_INET,…...

2020年认证杯SPSSPRO杯数学建模D题(第二阶段)让电脑桌面飞起来全过程文档及程序
2020年认证杯SPSSPRO杯数学建模 D题 让电脑桌面飞起来 原题再现: 对于一些必须每天使用电脑工作的白领来说,电脑桌面有着非常特殊的意义,通常一些频繁使用或者比较重要的图标会一直保留在桌面上,但是随着时间的推移,…...

vue3 修饰符大全(近万字长文)
系列文章目录 TypeScript 从入门到进阶专栏 文章目录 系列文章目录前言一、事件修饰符(Event Modifiers)1、.stop(阻止事件冒泡)2、.prevent(阻止事件的默认行为)3、.capture(使用事件捕获模式…...

HarmonyOS@State装饰器:组件内状态
State装饰器:组件内状态 State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就和自定义组件的渲染绑定起来。当状态改变时,UI会发生对应的渲染改变。 在状态变量相关装饰器中,State是最基础的&…...

如何让GPT支持中文
上一篇已经讲解了如何构建自己的私人GPT,这一篇主要讲如何让GPT支持中文。 privateGPT 本地部署目前只支持基于llama.cpp 的 gguf格式模型,GGUF 是 llama.cpp 团队于 2023 年 8 月 21 日推出的一种新格式。它是 GGML 的替代品,llama.cpp 不再…...

使用开源通义千问模型(Qwen)搭建自己的大模型服务
目标 1、使用开源的大模型服务搭建属于自己的模型服务; 2、调优自己的大模型; 选型 采用通义千问模型,https://github.com/QwenLM/Qwen 步骤 1、下载模型文件 开源模型库:https://www.modelscope.cn/models mkdir -p /data/…...
Java工程师面试题解析与深度探讨
Java工程师面试题解析与深度探讨 第一部分:引言 Java作为一门广泛应用的编程语言,拥有庞大的生态系统,Java工程师因此成为众多企业追逐的目标。而在Java工程师的招聘中,面试是了解候选人技能和经验的核心环节。本文将深入探讨一…...

Linux下安装JET2
0. 说明: JET2是一个基于Joint Evolutionary Trees的利用序列和结构信息预测蛋白质界面的软件,详情见: http://www.lcqb.upmc.fr/JET2/JET2.html,http://www.lgm.upmc.fr/JET/JET.html 和 https://doi.org/10.1371/journal.pcbi.1004580 本…...
【PostgreSQL】表管理-表继承
PostgreSQL 表继承 PostgreSQL 实现了表继承,这对于数据库设计人员来说是一个有用的工具。(SQL:1999 及更高版本定义了类型继承功能,该功能在许多方面与此处描述的功能不同。 让我们从一个例子开始:假设我们正在尝试…...

Dijkstra算法——邻接矩阵实现+路径记录
本文是在下面这篇文章的基础上做了一些补充,增加了路径记录的功能。具体Dijkstra的实现过程可以参考下面的这篇文章。 [jarvan:Dijkstra算法详解 通俗易懂](Dijkstra算法详解 通俗易懂 - jarvan的文章 - 知乎 https://zhuanlan.zhihu.com/p/338414118) …...
Vim基础操作
参考B站UP:正月点灯笼 vim入门教程(共3讲) 以下总结,部分搬运自评论区,楼主:-不是飞鱼QAQ,修改部分内容。 vim分为 命令 和 编辑 模式 i进入编辑模式( - - INSERT - - )…...

业务系统对接大模型的基础方案:架构设计与关键步骤
业务系统对接大模型:架构设计与关键步骤 在当今数字化转型的浪潮中,大语言模型(LLM)已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中,不仅可以优化用户体验,还能为业务决策提供…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...

c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...

均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...