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

vue3 ref和reactive的区别

news 来源：原创 2025/9/19 21:50:27

在 Vue 3 中，ref 和 reactive 是两种用于创建响应式数据的 API，但它们的使用场景和实现方式有一些区别。用大白话来说，它们的区别可以这样理解：

1. `ref`：适合处理简单数据

是什么：ref 是用来包装一个基本类型（比如数字、字符串、布尔值）或对象/数组的响应式工具。
怎么用：你需要通过 .value 来访问或修改 ref 包装的值。
适用场景：适合处理单个值，比如一个数字、一个字符串，或者一个简单的对象。

代码示例：

import { ref } from 'vue';const count = ref(0); // 创建一个响应式的数字
console.log(count.value); // 输出 0
count.value++; // 修改值

特点：

用 ref 包装的值，需要通过 .value 来访问或修改。
适合处理简单数据，比如计数器、开关状态等。

2. `reactive`：适合处理复杂对象

是什么：reactive 是用来创建一个响应式对象的工具，适合处理复杂的嵌套对象或数组。
怎么用：直接访问或修改对象的属性，不需要 .value。
适用场景：适合处理复杂的对象或数据结构，比如表单数据、用户信息等。

代码示例：

import { reactive } from 'vue';const user = reactive({name: '张三',age: 25,address: {city: '北京',},
});console.log(user.name); // 输出 '张三'
user.age = 26; // 直接修改属性

特点：

用 reactive 包装的对象，可以直接访问或修改属性，不需要 .value。
适合处理复杂的嵌套对象或数组。

3. 主要区别对比

特性	`ref`	`reactive`
数据类型	适合基本类型（数字、字符串等）或对象	适合对象或数组
访问方式	需要通过 `.value` 访问	直接访问属性
使用场景	简单数据（如计数器、开关）	复杂对象（如表单、用户信息）
性能	更适合单个值的响应式处理	更适合复杂对象的响应式处理

4. 什么时候用 `ref`，什么时候用 `reactive`？

用 ref 的情况：
- 你只需要管理一个简单的值，比如一个数字、一个字符串。
- 你需要明确知道这是一个响应式数据（因为要用 .value）。
- 你在组合式 API 中处理单个状态。
用 reactive 的情况：
- 你需要管理一个复杂的对象或嵌套数据结构。
- 你希望直接访问属性，而不想写 .value。
- 你在处理表单数据、用户信息等复杂场景。

5. 代码对比

ref 示例：

const count = ref(0);
const increment = () => {count.value++; // 需要 .value
};

reactive 示例：

const state = reactive({count: 0,
});
const increment = () => {state.count++; // 直接访问属性
};

总结

ref：适合简单数据，用 .value 访问。
reactive：适合复杂对象，直接访问属性。

简单来说，如果你只需要管理一个值（比如计数器），用 ref；如果你需要管理一个复杂的对象（比如表单），用 reactive。两者结合起来用，可以覆盖大部分场景！

vue3 ref和reactive的区别

在 Vue 3 中，ref 和 reactive 是两种用于创建响应式数据的 API，但它们的使用场景和实现方式有一些区别。用大白话来说，它们的区别可以这样理解： 1. ref：适合处理简单数据是什么：ref 是用来包装一个基本类…...

编程日记 2025/9/19 21:50:27

Elasticsearch7.1.1 配置密码和SSL证书

生成SSL证书 ./elasticsearch-certutil ca -out config/certs/elastic-certificates.p12 -pass 我这里没有设置ssl证书密码，如果需要设置密码，需要再配置给elasticsearch 在之前的步骤中，如果我们对elastic-certificates.p12 文件配置了密码…...

编程日记 2025/9/17 12:51:40

初识Redis

1.什么是Redis Redis是一种基于键值对（key-value）的NoSQL数据库。与很多键值对数据库不同的是，Redis中的value可以由String（字符串），hash（哈希），list（列表&a…...

编程日记 2025/9/19 13:27:28

Python Selenium自动化操作详解：从入门到实战

Python Selenium自动化操作详解：从入门到实战一、Selenium简介 Selenium是一个用于Web应用程序自动化测试的工具，支持多种浏览器和编程语言。结合Python使用，可以实现： 自动化表单提交动态网页数据抓取功能测试网页交互模拟二…...

编程日记 2025/9/18 14:24:03

第四天面试题

文章目录 1.什么叫 Java 的内存泄露与内存溢出？**1. 内存泄露（Memory Leak）****内存泄露的常见原因：****如何避免内存泄露：** **2. 内存溢出（Out Of Memory, OOM）****内存溢出的常见原因&#x…...

编程日记 2025/9/16 15:02:26

[论文阅读] SeeSR: Towards Semantics-Aware Real-World Image Super-Resolution

文章目录一、前言二、主要贡献三、Introduction四、Methodology4.1 Motivation ：4.2Framework Overview.** 一、前言通信作者是香港理工大学 & OPPO研究所的张磊教授，也是图像超分ISR的一个大牛了。论文如下 SeeSR: Towards Semantics-Aware Rea…...

编程日记 2025/9/17 12:51:30

面试题之箭头函数和普通函数有什么区别？

箭头函数（Arrow Function）和普通函数（Regular Function）是 JavaScript 中两种不同的函数定义方式，它们在语法、上下文（this）、原型链等方面存在显著区别。以下是它们的主要区别： 1. …...

编程日记 2025/9/18 19:25:26

jQuery AJAX 方法详解

jQuery AJAX 方法详解引言随着互联网技术的不断发展，前端开发领域的技术也在不断更新迭代。jQuery 作为一种广泛使用的前端JavaScript库，极大地简化了DOM操作和事件处理。在众多jQuery功能中，AJAX（Asynchronous JavaScript and XML）方法尤为突出，它允许我们在不重新加…...

编程日记 2025/9/17 12:51:26

深度集成DeepSeek大模型：WebSocket流式聊天实现

目录 5分钟快速接入DeepSeek大模型：WebSocket实时聊天指南创建应用开发后端代码 (Python/Node.js)结语 5分钟快速接入DeepSeek大模型：WebSocket实时聊天指南创建应用访问DeepSeek官网前往 DeepSeek官网。如果还没有账号，需要先注册一个。…...

编程日记 2025/9/18 13:51:33

千峰React:组件使用（1）

事件添加点击事件 function App() {const handClick () > {console.log(123)}return (<><button onClick{handClick}>点击</button></>) } export default App在react里也可以添加事件对象e 合成e 这个e和js里的e不太一样，是合成的…...

编程日记 2025/9/16 18:15:07

ram的使用——初始化很重要

背景 ram是非常常用的ip，前人的经验告诉我们，如果不对ram进行初始化直接读写，不定态在实际上板时会出现不可预知的问题。我们需要对ram进行初始化写0操作，代码如下。需要注意，复位释放时立马写入可能存在复位抖动的…...

编程日记 2025/9/17 9:38:50

JVM深入理解

目录 JVM介绍： 解释： 特点： 整体构成： 执行过程： 运行时数据区： Java堆剖析： 堆内存区域划分为什么要分代呢？ 内存分配： 新生区与老年区配置比例&#xff1a…...

编程日记 2025/9/19 17:17:55

DeepSeek 开放平台无法充值改用其他平台API调用DeepSeek-chat模型方法

近几天DeepSeek开放平台无法充值目前已经关闭状态，大家都是忙着接入DeepSeek模型 ，很多人想使用DeepSeek怎么办？ 当然还有改用其他平台API调用方法，本文以本站的提供chatgpt系统为例，如何修改DeepSeek-chat模型API接口…...

编程日记 2025/9/19 3:00:23

ImportError: cannot import name ‘FixtureDef‘ from ‘pytest‘

错误信息表明 pytest 在尝试导入 FixtureDef 时出现了问题。通常是由于 pytest 版本不兼容或插件版本冲突引起的。以下是详细的排查步骤和解决方案： 1. 检查 pytest 版本首先，确认当前安装的 pytest 版本。某些插件可能需要特定版本的 pytest 才能…...

编程日记 2025/9/16 13:20:16

懒人精灵本地离线卡密验证系统教程(不联网、安全稳定、省钱、永久免费、无任何限制)

1.合集懒人精灵本地离线卡密验证系统教程(不联网、安全稳定、省钱、永久免费、无任何限制)：https://www.bilibili.com/video/BV1M6rdYEEog/ 备注： 1.本地离线卡密采用最安全的非对称加解密技术，设备id采用最安全多重混合加密不可逆技术生成&…...

编程日记 2025/9/17 9:38:42

Rust编程语言入门教程（六）变量与可变性

Rust 系列 🎀Rust编程语言入门教程（一）安装Rust🚪 🎀Rust编程语言入门教程（二）hello_world🚪 🎀Rust编程语言入门教程（三） Hello Cargo&#x1f…...

编程日记 2025/9/17 9:38:41

ArcGis和Super Map

1.ArcGIS ArcGIS 是美国环境系统研究所（ESRI）开发的一系列地理信息系统（GIS）软件产品的总称，它提供了一套全面的工具和服务，可用于采集、存储、分析、管理和展示地理数据，在众多领域都有广泛的…...

编程日记 2025/9/17 9:38:39

57000单词原始录入时间258S 核心代码: List<Word> wordBookList ExcelUtil.getReader(file.getInputStream()).readAll(Word.class);if (!CollectionUtil.isEmpty(wordBookList)) {for (Word word : wordBookList) {//逐条向数据库中插入单词wordMapper.insert(word);}…...

编程日记 2025/9/19 6:32:55

Zookeeper和Kafka的依赖关系

Zookeeper 和 Kafka 是紧密相关的，它们在功能上相互协作，共同为分布式系统提供支持，以下是它们的关系具体介绍： Kafka 依赖 Zookeeper 进行元数据管理主题信息存储：Kafka 中的主题（Topic）相关信息，如主题的名称、分区数量、副本分布等都存储在 Zookeeper 中。当 Kafk…...

编程日记 2025/9/19 19:30:57

驱动开发、移植

一、任务明确：把创龙MX8的驱动按照我们的要求然后移植到我们的板子 1.Linux系统启动卡制作， sd卡先按照《用户手册—3-2-Linux系统启动卡制作及系统固化》把创龙的Linux系统刷进去。 2. 把TLIMX8-EVM的板子过一遍把刚刚烧好系统的sd卡插入创…...

编程日记 2025/9/17 9:38:33

RT-Thread+STM32L475VET6实现红外遥控实验

文章目录前言一、板载资源介绍二、具体步骤1. 确定红外接收头引脚编号2. 下载infrared软件包3. 配置infrared软件包4. 打开STM32CubeMX进行相关配置4.1 使用外部高速时钟，并修改时钟树4.2 打开定时器16(定时器根据自己需求调整)4.3 打开串口4.4 生成工程 5. 打开HW…...

编程日记 2025/9/18 17:55:06

分布式大语言模型服务引擎vLLM论文解读

论文地址：Efficient Memory Management for Large Language Model Serving with PagedAttention 摘要大语言模型（LLMs）的高吞吐量服务需要一次对足够多的请求进行批处理。然而，现有系统面临困境，因为每个请求的键值…...

编程日记 2025/9/17 9:38:29

Bio-ORACLE数据分享[decade 2010-2020] [Surface layers]

Bio-ORACLE数据分享[decade 2010-2020] [Surface layers] 文章目录 Bio-ORACLE数据分享[decade 2010-2020] [Surface layers]前言一、文件分享（主要）二、相关代码（选看）总结 Bio-ORACLE数据分享[decade 2010-2020] [Surface layer…...

编程日记 2025/9/18 14:38:14

MySQL六大日志的功能介绍。

前言首先，MySQL的日志应该包括二进制日志（Binary Log）、错误日志（Error Log）、查询日志（General Query Log）、慢查询日志（Slow Query Log）、重做日志（Redo …...

编程日记 2025/9/19 5:32:51

ChatGPT客户端无法在微软应用商店下载的解决方法

最近网页端的GPT4o只会用how can I assist you 回复了，查了一下发现是类似IP封锁/模型降级等等问题，总之解决方法就是下载客户端。客户端需要通过微软应用商店下载，但是下载时总会出现如下情况： 1.区域和语言没有设置为美国/英语导…...

编程日记 2025/9/17 23:23:34

数仓搭建(hive):DWS层(服务数据层)

DWS层示例: 搭建日主题宽表需求维度步骤在hive中建数据库dws >>建表 CREATE DATABASE if NOT EXISTS DWS; 建表sql CREATE TABLE yp_dws.dws_sale_daycount( --维度 city_id string COMMENT 城市id, city_name string COMMENT 城市name, trade_area_id string COMME…...

编程日记 2025/9/17 9:38:22

Ollama+DeepSeek+Open-WebUi

环境准备 Docker Ollama Open-WebUi Ollama 下载地址：Ollama docker安装ollama docker run -d \ -v /data/ollama/data:/root/.ollama \ -p 11434:11434 \ --name ollama ollama/ollama 下载模型 Ollama模型仓库 # 示例：安装deepseek-r1:7b doc…...

编程日记 2025/9/18 22:31:12

【笔记】LLM｜Ubuntu22服务器极简本地部署DeepSeek+联网使用方式

2025/02/18说明：2月18日~2月20日是2024年度博客之星投票时间，走过路过可以帮忙点点投票吗？我想要前一百的实体证书，经过我严密的计算只要再拿到60票就稳了。一人可能会有多票，Thanks♪(･ω･)&am…...

编程日记 2025/9/19 19:07:49

FreeSwitch中mod_dptools和mod_easyroute两个模块及应用场景

FreeSWITCH 中的 mod_dptools 和 mod_easyroute 是两个功能不同的模块，分别服务于呼叫控制和动态路由场景。以下是详细介绍： mod_dptools 功能概述 mod_dptools（Dialplan Tools）是 FreeSWITCH 最核心的模块之一，提供了…...

编程日记 2025/9/17 7:25:49

【Java】泛型与集合篇 —— Set 接口

目录 Set 接口及实现类HashSet 类特点内部实现构造方法LinkedHashSet 类基本概念特点构造方法常用方法适用场景用 Set 对象实现集合运算TreeSet 类特性构造方法常用方法注意事项对象顺序自然排序定制排序注意事项Set 接口及实现类 HashSet 类 HashSet 是 Java 集合框架中 Set…...

编程日记 2025/9/17 9:38:14

DeepSeek 助力 Vue 开发：打造丝滑的右键菜单（RightClickMenu）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2025/9/17 9:38:13

数据结构与算法面试专题——堆排序

完全二叉树完全二叉树中如果每棵子树的最大值都在顶部就是大根堆完全二叉树中如果每棵子树的最小值都在顶部就是小根堆设计目标：完全二叉树的设计目标是高效地利用存储空间，同时便于进行层次遍历和数组存储。它的结构使得每个节点的子节点都可以通过简…...

编程日记 2025/9/17 9:38:11

【Mysql】索引

【Mysql】索引一、索引的简介二、索引结构2.1 Hash2.2 二叉搜索树2.3 B树2.4 B树三、索引分类3.1 主键索引3.2 普通索引3.3 唯一索引3.4 全文索引3.5 聚集索引3.6 非聚集索引3.7 索引覆盖四、使用索引4.1 自动创建索引4.2 手动创建索引4.2.1 主键索引4.2.2 唯一索引4.2.3 普…...

编程日记 2025/9/19 1:59:25

qt的下载安装详细介绍

下载我们可以在国内的镜像网站上下载qt安装包，按需下载： 我的需求是在windows上运行，x64的qt5.15.2,所以我下载的是qt-unified-windows-x64-4.6.0-online.exe 下载完成之后，我们来到存放该exe文件的目录，打开命令窗…...

编程日记 2025/9/18 20:11:45

Eclipse插件开发六：使用Web前端技术开发AI助手页面

之前的过程中，我们都不怎么熟悉Eclipse的哪些API，样式也没发怎么去修改，现在我们要修改为用html的方式来编写. 准备一个AI助手聊天页面的html.css,js代码效果如下所示。 1.快速demo 1.1.准备前端代码确保准备的前端代码可以在浏览器正常…...

编程日记 2025/9/19 21:08:40

Jackson使用

Jackson 是一个功能强大的 JSON 处理库，除了基本的序列化和反序列化功能外，它还提供了许多其他功能，以满足不同的需求。以下是一些常用的高级功能： 0.普通序列化反序列化序列化 import com.fasterxml.jackson.databind.ObjectM…...

编程日记 2025/9/19 20:51:39

Maven——Maven开发经验总结（1）

摘要本文总结了 Maven 开发中的多个关键经验，包括如何根据版本号决定推送到 releases 或 snapshots 仓库，如何在构建过程中跳过测试，父项目如何控制子项目依赖版本，父项目依赖是否能传递到子项目，如何跳过 Maven dep…...

编程日记 2025/9/19 8:42:13

MyBatis-Plus之通用枚举

MyBatis-Plus之通用枚举前言 MyBatis-Plus中提供了通用枚举，简单来说就是将数据库中的某一字段的代替的含义转换成真实的含义将数据展示给用户，用户在存储时也会将真实值转换成代替的数字存入到数据库中。举个例子：用户性别在数据库中存储…...

编程日记 2025/9/18 0:20:11

React通用登录/注销功能实现方案（基于shadcn/ui）

React通用登录/注销功能实现方案（基于shadcn/ui） 一、功能需求分析二、通用功能封装1. 通用登录表单组件2. 认证Hook封装三、功能使用示例1. 登录页面实现2. 用户菜单实现四、路由保护实现五、方案优势一、功能需求分析需要实现以下核心功能&#x…...

编程日记 2025/9/19 1:48:34

AI工具篇：利用DeepSeek+Kimi 辅助生成综述汇报PPT

随着科研和学术报告需求的增加，如何高效地准备一份结构清晰、内容充实的PPT已成为许多研究者的挑战。传统的PPT制作过程繁琐，需要大量文献收集、数据分析和设计工作，而AI工具能够帮助提升效率，减少重复劳动。本文将介绍如何使用…...

编程日记 2025/9/18 9:32:18

审计级别未启用扩展模式导致查询 DBA_AUDIT_TRAIL 时 SQL_TEXT 列为空

如果查询 DBA_AUDIT_TRAIL 时发现 SQL_TEXT 列为空，但其他字段（如 OS_USERNAME、USERNAME、TIMESTAMP 等）有数据，可能是由于以下原因之一。以下是可能的原因及解决方法： 1. 审计级别未启用扩展模式默认情况下&#x…...

编程日记 2025/9/17 20:21:47

HTTP 和RESTful API 基础，答疑

一文搞懂RESTful API - bigsai - 博客园 1. API 路径开头必须 /，表示绝对路径，不支持 . 或 ..（相对路径）。API 结尾 / 通常不需要，但部分框架会自动处理 / → 无 /。 ✅ 推荐 GET /api/v1/products # 资源集合…...

编程日记 2025/9/17 11:34:01

手写简易RPC（实践版）

首先了解rpc rpc-远程过程调用，openFeign，Dubbo都可以算作rpc，以微服务来具体说明，就是在本地不需要去发送请求，通过rpc框架，像调用本地方法一样调用其他服务的方法，本质上还是要经过网络&…...

编程日记 2025/9/17 11:34:00

Day6 25/2/19 WED

【一周刷爆LeetCode，算法大神左神（左程云）耗时100天打造算法与数据结构基础到高级全家桶教程，直击BTAJ等一线大厂必问算法面试题真题详解（马士兵）】https://www.bilibili.com/video/BV13g41157hK?p4&v…...

编程日记 2025/9/18 21:21:49

【DL】浅谈深度学习中的知识蒸馏 | 输出层知识蒸馏

目录一核心概念与背景二输出层知识蒸馏 1 教师模型训练 2 软标签生成（Soft Targets） 3 学生模型训练三扩展 1 有效性分析 2 关键影响因素 3 变体一核心概念与背景知识蒸馏（Knowledge Distillation, KD）是一种模…...

编程日记 2025/9/18 11:46:17

机器学习PCA和LDA

主成分分析（PCA, Principal Component Analysis）和线性判别分析（LDA, Linear Discriminant Analysis）是两种常用的降维方法，它们虽然都用于数据降维，但核心思想和应用场景不同。 PCA（主成分分析…...

编程日记 2025/9/19 9:14:18

tcp协议连接，和传输数据

1、连接这个是通用的 2、传送数据当连接建立后，客户端和服务器都可以主动发送数据，分别如下 1》客户端先发送数据这里是单向的，服务器没有对客户端的数据内容进行应答，只是单纯的对报文应答ack 2》服务器先发送数据...

编程日记 2025/9/18 3:13:36

【异常错误】pycharm debug view变量的时候显示不全，中间会以...显示

异常问题： 这个是在新版的pycharm中出现的，出现的问题，点击view后不全部显示，而是以...折叠显示在setting中这么设置一下就好了： 解决办法： https://youtrack.jetbrains.com/issue/PY-75568/Large-stri…...

编程日记 2025/9/17 0:01:21

Java基础——代理模式

代理模式是一种比较好理解的设计模式。简单来说就是我们使用代理对象来代替对真实对象(real object)的访问，这样就可以在不修改原目标对象的前提下，提供额外的功能操作，扩展目标对象的功能。一、代理模式的主要作用控制访问：通…...

编程日记 2025/9/19 18:18:57

解锁机器学习核心算法｜主成分分析（PCA）：降维的魔法棒

一、引言在机器学习的庞大算法体系中，有十种算法被广泛认为是最具代表性和实用性的，它们犹如机器学习领域的 “十大神器”，各自发挥着独特的作用。这十大算法包括线性回归、逻辑回归、决策树、随机森林、K - 近邻算法、K - 平均算法、支持向…...

编程日记 2025/9/18 16:07:34

1. ref：适合处理简单数据

2. reactive：适合处理复杂对象

3. 主要区别对比

4. 什么时候用 ref，什么时候用 reactive？

5. 代码对比

总结

相关文章：

1. `ref`：适合处理简单数据

2. `reactive`：适合处理复杂对象

4. 什么时候用 `ref`，什么时候用 `reactive`？