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 - - )…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
FastAPI 教程:从入门到实践
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API,支持 Python 3.6。它基于标准 Python 类型提示,易于学习且功能强大。以下是一个完整的 FastAPI 入门教程,涵盖从环境搭建到创建并运行一个简单的…...

2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析:跨文件编程的终极指南 📅 更新时间:2025年6月5日 🏷️ 标签:C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么?&…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...

基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
Python第七周作业
Python第七周作业 文章目录 Python第七周作业 1.使用open以只读模式打开文件data.txt,并逐行打印内容 2.使用pathlib模块获取当前脚本的绝对路径,并创建logs目录(若不存在) 3.递归遍历目录data,输出所有.csv文件的路径…...

Axure Rp 11 安装、汉化、授权
Axure Rp 11 安装、汉化、授权 1、前言2、汉化2.1、汉化文件下载2.2、windows汉化流程2.3、 macOs汉化流程 3、授权 1、前言 Axure Rp 11官方下载链接:https://www.axure.com/downloadthanks 2、汉化 2.1、汉化文件下载 链接: https://pan.baidu.com/s/18Clf…...