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

Vue 3 中 ref和reactive的详细使用场景

news 来源：原创 2025/8/25 10:24:36

一、核心区别

特性	ref	reactive
数据类型	基本类型 + 对象/数组（自动解包）	仅对象/数组
响应式原理	通过 `.value` 触发响应	直接代理对象
模板中使用	自动解包（无需 `.value`）	直接访问属性
解构/传递	保持响应性	需用 `toRefs` 保持响应性

二、使用场景与案例

1. ref 的典型场景

(1) 管理基本类型值

import { ref } from 'vue'// 计数器（数字）
const count = ref(0)
const increment = () => {count.value++ // 修改值必须用 .value
}// 开关状态（布尔值）
const isOpen = ref(false)
const toggle = () => {isOpen.value = !isOpen.value
}

(2) 引用 DOM 元素

<template><input ref="inputRef" />
</template><script setup>
import { ref, onMounted } from 'vue'
const inputRef = ref(null)onMounted(() => {inputRef.value.focus() // 访问 DOM 元素
})
</script>

(3) 需要整体替换对象/数组

const user = ref({ name: 'Alice', age: 25 })
// 替换整个对象
user.value = { name: 'Bob', age: 30 }const list = ref(['apple', 'banana'])
// 替换整个数组
list.value = ['orange', 'grape']

2. reactive 的典型场景

(1) 复杂表单对象

import { reactive } from 'vue'const form = reactive({username: '',password: '',rememberMe: false
})// 直接修改属性（无需 .value）
form.username = 'John'

(2) 嵌套数据结构

const nestedData = reactive({user: {profile: {name: 'Alice',address: {city: 'Shanghai'}}}
})// 深层嵌套修改仍保持响应性
nestedData.user.profile.address.city = 'Beijing'

(3) 数组操作

const items = reactive(['a', 'b', 'c'])// 直接修改元素
items[0] = 'z' // 响应式更新
items.push('d') // 使用数组方法

三、关键操作指南

1. 正确赋值/修改

ref 示例：

const count = ref(0)// ✅ 正确修改
count.value = 10// ❌ 错误！直接赋值会覆盖 ref 对象
count = 10

reactive 示例：

const state = reactive({ count: 0 })// ✅ 正确修改属性
state.count = 10// ❌ 错误！直接替换对象会失去响应性
state = { count: 20 } // ✅ 保持响应性的对象替换方式
Object.assign(state, { count: 20 })

2. 处理响应式丢失

(1) 解构 reactive 对象

const state = reactive({ x: 1, y: 2 })// ❌ 解构后失去响应性
const { x, y } = state // ✅ 使用 toRefs 保持响应性
const { x, y } = toRefs(state)
x.value = 10 // 现在修改有效

(2) 函数间传递

// ✅ 传递整个 reactive 对象
const user = reactive({ name: 'Alice' })
updateUser(user)function updateUser(userObj) {userObj.name = 'Bob' // 修改仍响应
}// ✅ 传递 ref 对象
const count = ref(0)
increment(count)function increment(numRef) {numRef.value++
}

四、性能与最佳实践

优先选择：
• 基本类型 → ref
• 复杂对象 → reactive
• 需要灵活替换 → ref（即使存储对象）
注意事项：
• 避免在 reactive 中嵌套 ref（除非明确需要）
• 对数组进行索引操作时，建议使用变更方法（push/pop 等）
• 大型数据集考虑 shallowRef/shallowReactive 提升性能

五、综合对比案例

<script setup>
import { ref, reactive } from 'vue'// ref 管理用户ID（基本类型）
const userId = ref(123)// reactive 管理用户详情（对象）
const userDetail = reactive({name: 'Alice',permissions: ['read', 'write']
})// 修改操作示例
const updateUser = () => {// 修改 refuserId.value = 456// 修改 reactive 对象userDetail.name = 'Bob'userDetail.permissions.push('delete')
}// 替换整个对象的最佳实践
const resetUser = () => {// ref 可以直接替换userId.value = 0// reactive 应该合并属性而非直接赋值Object.assign(userDetail, {name: 'Guest',permissions: []})
}
</script>

通过以上案例可以看出：ref 更适合管理独立值和需要完全替换的场景，而 reactive 在处理复杂对象结构时更直观。根据具体需求灵活选择，可显著提升代码可维护性。

Vue 3 中 ref和reactive的详细使用场景

一、核心区别特性refreactive数据类型基本类型对象/数组（自动解包）仅对象/数组响应式原理通过 .value 触发响应直接代理对象模板中使用自动解包（无需 .value）直接访问属性解构/传递保持响应性需用 toRefs 保持响应性二、使用…...

编程日记 2025/8/25 10:24:36

react使用createFromIconfontCN，自定义iconfont 图标

记录reactantdesign项目中使用createFromIconfontCN，自定义iconfont 图标效果图： import { createFromIconfontCN } from ant-design/icons;const MyIcon createFromIconfontCN({scriptUrl: //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js, // 在 icon…...

编程日记 2025/8/25 14:00:49

危化品经营单位安全生产管理人员备考要点

危化品经营单位安全生产管理人员备考要点 📌 考试核心内容 ✅ 必考法规： 《危险化学品安全管理条例》重点条款（如经营许可条件） GB 18218-2018《重大危险源辨识》新标准安全生产法律责任（罚款金额/刑事责任&…...

编程日记 2025/8/25 18:46:09

音频炼金术：Threejs 让 3D 场景「听」起来更真实

在 Three.js 中允许在场景中添加声音，将声音与 3D 对象关联，实现更丰富的交互体验。 Audio Three.js 中的Audio对象用于表示音频源，它是一个THREE.Object3D的子类，用于控制音频播放、暂停、是否循环等设置的对象，可以…...

编程日记 2025/8/21 11:56:00

【C++】Stack和Queue的底层封装和实现

目录 stack容器适配器stack的模拟实现 queue的模拟实现deque了解deque的结构deque的管理方式和遍历元素方式deque的缺陷为啥库里面的stack和queue使用deque end stack 容器适配器 Stack可以封装成前面三个变量的形式，但是这里我们提出一个概念叫容器适配器&#xf…...

编程日记 2025/8/25 18:47:58

Vue3 SSR 工程化实践：日常工作中的性能优化与实战技巧

一、流式渲染与分块传输（面向性能的关键优化） 1.1 流式响应基础实现 // Node.js Express 示例（Vite SSR同理）import { renderToWebStream } from vue/server-rendererapp.get(/, async (req, res) > { res.setHeader(Conten…...

编程日记 2025/8/25 18:45:18

【Python进阶】字符串操作全解与高效应用

目录前言：技术背景与价值当前技术痛点解决方案概述目标读者说明一、技术原理剖析核心概念图解核心作用讲解关键技术模块技术选型对比二、实战演示环境配置要求核心代码实现（10个案例）案例1：基础操作案例2：高效格式化…...

编程日记 2025/8/19 10:19:04

LeetCode[28]找出字符串中第一个匹配项的下标（KMP版本）

思路： 一开始我使用暴力过的，但是感觉还是不完美，想学习一下KMP的写法，所以这篇笔记就来了，首先KMP算法就要先维护一个最长相等前后缀的一个数组（统称前缀表），那么这个数组为什么能找…...

编程日记 2025/8/22 6:51:34

Cesium实现雨、闪电、雪、雾天气效果

基于 Cesium 的三维地理信息场景，集成了天气效果后处理、3D 模型加载、水域渲染等功能。以下是详细功能总结： 1. 场景初始化与基础配置三维地球初始化创建 Cesium Viewer 实例，隐藏默认控件（时间轴、动画控件等）&…...

编程日记 2025/8/25 18:46:10

上门送水小程序区域代理模块框架设计

一、逻辑分析代理申请流程： 潜在代理商通过小程序提交代理申请，需要填写个人或企业基本信息、联系方式、期望代理区域等。系统收到申请后，进行初步审核，检查信息的完整性和合规性。运营人员进行人工审核，根据公司政策…...

编程日记 2025/8/25 9:39:51

GIS开发笔记（6）结合osg及osgEarth实现半球形区域绘制

一、实现效果输入中心点坐标及半径，绘制半球形区域，地下部分不显示。二、实现原理根据中心点及半径绘制半球形区域，将其挂接到地球节点。三、参考代码 void GlobeWidget::drawSphericalRegion(osg::Vec3d point,double radius) {// 使…...

编程日记 2025/8/25 18:44:39

UE5在场景3D物体上播放本地视频（带声音）

UE5在场景3D物体上播放本地视频（带声音） 0.在Map中创建一个立方体,调整大小看起来像屏幕一样 1.创建文件夹Movies在根目录下 2.把准备的视频复制到Movies文件夹下 3.把Movies文件夹下的视频拖入到UE自己创建的文件夹下，此时会有个文件媒体源…...

编程日记 2025/8/24 4:46:59

安装部署RabbitMQ

一、RabbitMQ安装部署 1、下载epel源 2、安装RabbitMQ 3、启动RabbitMQ web管理界面启用插件 rabbitmq数据目录创建rabbitmq用户设置为管理员角色给用户赋予权限 4、访问rabbitmq...

编程日记 2025/8/24 22:21:34

STM32启动流程详解

STM32启动流程详解本文档详细介绍STM32微控制器从上电到main函数执行的完整启动流程。 1. 上电与复位过程当STM32芯片上电或复位时，硬件会执行以下步骤： 上电复位(POR)/低电平复位(PDR): 芯片接通电源或NRST引脚置低时触发初始PC值设置: 程序计数器…...

编程日记 2025/8/23 19:19:10

【正点原子STM32MP257连载】第四章 ATK-DLMP257B功能测试——CPU温度CPU主频

1）实验平台：正点原子ATK-DLMP257B开发板 2）浏览产品：https://www.alientek.com/Product_Details/135.html 3）全套实验源码手册视频下载：正点原子资料下载中心第四章 ATK-DLMP257B功能测试——CPU主频&…...

编程日记 2025/8/21 7:48:59

LVDS系列8：Xilinx 7系可编程输入延迟(一)

在解析LVDS信号时，十分重要的一环就是LVDS输入信号线在经过PCB输入到FPGA中后，本来该严格对齐的信号线会出现时延，所以需要在FPGA内部对其进行延时对齐后再进行解析。 Xilinx 7系器件中用于输入信号延时的组件为IDELAYE2可编程原语&#xff0…...

编程日记 2025/8/24 14:08:23

iotdb时序数据库使用

iotdb https://github.com/apache/iotdb.git 安装maven3.9.6以上版本执行编译 iotdb启动，使用安装包sbin目录下的start-standalone.bat sbin\start-standalone.bat 执行报错如果是内存问题，可以在对应的node配置中修改，如conf\datanode-ev…...

编程日记 2025/8/23 23:30:27

【Caddy】：现代化、自动 HTTPS 的 Web 服务器新星

🚀 Caddy：现代化、自动 HTTPS 的 Web 服务器新星！ 在构建和部署 Web 应用时，你可能听说过或用过如 Nginx、Apache 等经典的 Web 服务器。但在今天，有一个越来越受欢迎的新选择——Caddy。本文将带你认识 Caddy&…...

编程日记 2025/8/22 19:16:38

用 DeepSeek 精准解析，PDF 一键转电子书！

经常需要阅读大量的 PDF 文档，但在移动设备上阅读 PDF 通常体验极差。屏幕小、排版固定，需要不断放大缩小，眼睛容易疲劳，长时间阅读简直是一种折磨。虽有不少 PDF 转换工具，但对扫描书籍支持不佳，经常丢失…...

编程日记 2025/8/25 15:43:11

【AIoT】智能硬件GPIO通信详解（二）

前言上一篇我们深入解析了智能硬件GPIO通信原理（传送门：【AIoT】智能硬件GPIO通信详解（一））。接下来，我们将结合无人售货机控制场景，通过具体案例进一步剖析物联网底层通信机制的实际应用。在智能零售领域，无人售货机通过AI技术升级为智能柜，其设备控制的底层通信…...

编程日记 2025/8/24 3:41:46

Mac OS系统下kernel_task占用大量CPU资源导致系统卡顿

CPU负载突然飙升，如截图： 根本原因，大家从各种博主上已知晓，现在提供自己的解决办法，亲测有效一、设置开机自动禁用温度管理守护进程 1.创建脚本文件 mkdir -p ~/Scripts touch ~/Scripts/disable_thermald.sh …...

编程日记 2025/8/24 21:08:29

镜舟科技助力某大型电网企业破解数据架构升级难题，打造国产化湖仓标杆

在 “十四五” 规划全面推进国产化替代的背景下，某大型电网企业联合镜舟科技与腾讯云，基于全球领先的开源分析型数据库 StarRocks 及腾讯 TBDS 大数据平台，构建电力行业国产化湖仓一体架构。该项目实现 PB 级电力数据的统一管理，为…...

编程日记 2025/8/21 2:21:29

Linux内核内存管理单元详解Linux 内核伙伴系统（Buddy System）的快速路径分配函数get_page_from_freelist

一、函数核心作用 get_page_from_freelist 是 Linux 内核伙伴系统（Buddy System）的快速路径分配函数，负责从指定的内存区域（Zone）中高效分配连续的物理内存页。其核心逻辑是遍历允许的 Zone 列表，检查水位…...

编程日记 2025/8/22 1:49:55

网络原理 - 初识网络 2

目录 OSI 七层协议 TCP / IP 五层模型网络设备所在分层网络分层对应封装和分用（网络传输数据过程中，最核心的流程） 用一个具体例子来梳理以下封装和分用的过程封装 1. 应用层（应用程序） -- QQ 2. 传输层 …...

编程日记 2025/8/25 10:40:47

如何利用GM DC Monitor快速监控一台网络类设备

GM DC Monitor v2.0在网络类设备监控的效率非常高！ 如果您需要管理运维大量的网络类设备，GM DC Monitor是个不错的选择。如果您具备一定的采集脚本编写能力，可以在平台的定制属于自己的监控模板！ 1）首先建立数据中…...

编程日记 2025/8/21 20:35:55

类和对象终

一、初始化列表再谈构造函数我们之前实现构造函数的时候，初始化成员变量在函数体内赋值的，构造函数还有一种初始化方式，就是初始化列表我们先实现一个栈来举例： // 实现一个栈 typedef int DataType; class Stack { public:…...

编程日记 2025/8/23 1:36:41

教程：批量提取图片pdf固定位置文字然后保存为新的文件名，基于Python和阿里云的实现方案

一、项目背景在实际工作和生活中，存在大量需要对图片或 PDF 进行批量处理的场景。例如，在档案管理中，工作人员可能会扫描大量文件，生成图片或 PDF 格式的档案资料。这些资料通常包含特定位置的关键信息，如文件编号、日期等。通过批量提取这些关键信息并将其作为文件名，…...

编程日记 2025/8/24 9:39:32

JVM：堆、方法区

一、堆概念：堆用于存储对象和数组，主要分为新生代和老年代，新生代又细分为伊甸园区、幸存者 0 区（S0）和幸存者 1 区（S1）内存设置：可用 -Xmx 和 -Xms 设置堆内存大小，-X…...

编程日记 2025/8/24 8:57:12

JVM-基于Hotspot

前言 Java虚拟机（Java Virtual Machine简称JVM）是运行所有Java程序的抽象计算机，是Java语言的运行环境，其主要任务为将字节码装载到内部，解释/编译为对应平台上的机器指令执行。 Java虚拟机规范定义了一个抽象的——…...

编程日记 2025/8/24 16:49:54

Android 10.0 第三方Launcher设置默认Launcher后导致Recent最近任务键无效

1.前言在10.0的系统rom定制化开发中，在进入launcher的定制过程中，在某些产品中，需要设置第三方launcher为默认Launcher功能，所以在设置以后，会发现最近recent键无效，所以接下来需要分析相关流程来实现相关功能的实现 2.第三方Launcher设置默认Launcher后导致Recent最…...

编程日记 2025/8/20 2:22:16

状态模式详解与真实场景案例（Java实现）

模式定义状态模式（State Pattern） 允许对象在其内部状态改变时改变它的行为，使对象看起来像是修改了它的类。属于行为型设计模式，核心思想是将状态抽象为独立对象，不同状态下行为封装在不同状态类中。解决的问题 …...

编程日记 2025/8/21 2:34:52

uniapp-商城-26-vuex 使用流程

为了能在所有的页面都实现状态管理，我们按照前面讲的页面进行状态获取，然后再进行页面设置和布局，那就是重复工作，vuex 就会解决这样的问题，如同类、高度提炼的接口来帮助我们实现这些重复工作的管理。避免一直在造一样的轮子。 https://vuex.vuejs.org/zh/#%E4%BB%80%E4…...

编程日记 2025/8/24 15:03:54

科技快讯 | 智谱开源最新GLM模型系列；“AI 洗头店”现身广州；ChatGPT上线图库功能

智谱开源最新GLM模型系列，启用全球域名“Z.ai” 4月15日，智谱开源最新GLM模型系列，包括32B和9B尺寸，涵盖基座、推理、沉思三类模型，全部遵循MIT开源许可协议。推理模型GLM-Z1-32B-0414实测推理速度达200 tokens/秒&…...

编程日记 2025/8/25 17:32:52

LeetCode 2537.统计好子数组的数目：滑动窗口(双指针)

【LetMeFly】2537.统计好子数组的数目：滑动窗口(双指针) 力扣题目链接：https://leetcode.cn/problems/count-the-number-of-good-subarrays/ 给你一个整数数组 nums 和一个整数 k ，请你返回 nums 中好子数组的数目。一个子数组 arr 如果…...

编程日记 2025/8/20 18:54:52

精益数据分析（1/126）：从《精益数据分析》探寻数据驱动增长之道

精益数据分析（1/126）：从《精益数据分析》探寻数据驱动增长之道在当今数字化时代，数据无疑是企业发展的关键驱动力，对于竞争激烈的程序化广告行业更是如此。最近我在研读《精益数据分析》这本书，收获颇丰&…...

编程日记 2025/8/23 12:36:11

uniapp-商城-27-vuex 通用方法

1 概述上节说了vuex 的基本使用方法，分析了基本的使用方法。在使用中，常见使用，我们要针对状态，购物车，不同类事务的管理，如果按照上节课的通用方法，那么使用和维护是会很大的难度的。所以这里就必须要进行处理，借助 modules 进行定义不同类事务的处理手段。便于…...

编程日记 2025/8/23 19:59:30

MetaLiveX：用AI重新定义直播互动的边界

“直播的核心价值,在于它能否让观众从‘旁观者’变为‘共創者’。”在近期一场数字技术峰会上,杜子程(Emma Zicheng Du)首次公开阐释了其团队研发的MetaLiveX平台核心理念。这一以AI为驱动的智能直播系统,正通过动态场景生成与情感化交互设计,重新定义虚拟社群的参与逻辑。目前…...

编程日记 2025/8/25 10:44:30

线程安全学习

1 什么是线程线程是cpu调度的最小单位，在Linux 下实现线程的方式为轻量级进程，复用进程的结构体，使用clone函数创建 2 线程安全所谓线程安全，更确切的应该描述为内存安全 #include <stdio.h> #include <pthread.h…...

编程日记 2025/8/21 17:57:25

三层路由器，SSH远程登录访问路由器，通过telnet远程登录访问路由器（不安全），路由器的基本设置之多网络互联解决办法：单臂路由

三层路由器默认路由器端口关闭：no shutdown （开启）需进入端口默认路由开启：无需 ip routing路由器充当网关，可以连接不同网络接口种类丰富，数量少 SSH远程登录访问路由器记得设IP Would you like to e…...

编程日记 2025/8/25 4:27:07

分布式光伏电站运维难？Acrel-1000DP助力安全稳定运行

针对用户新能源接入后存在安全隐患、缺少有效监控、发电效率无法保证、收益计算困难、运行维护效率低等通点，提出的Acrel-1000DP分布式光伏监控系统平台，对整个用户电站全面监控，为用户实现降低能源使用成本、减轻变压器负载、余电上网&#…...

编程日记 2025/8/22 10:42:51

基于sherpa-onnx 安卓语音识别尝鲜

sherpa-onnx简介 Sherpa：是一个由 K2-FSA 团队开发的开源语音处理框架，旨在解决传统语音识别工具（如 Kaldi）在模型部署和跨平台适配中的复杂性问题。它通过整合现代深度学习技术和高效推理引擎，提供了从语音识别、合…...

编程日记 2025/8/24 13:26:39

利用 Python 和 AI 技术创作独特的图像艺术作品

1. 项目目标生成艺术作品：利用 AI 模型（如 Stable Diffusion）生成具有艺术风格的图像。自定义风格：通过文本提示（prompt）控制图像的艺术风格（如赛博朋克、印象派、超现实主义等）。…...

编程日记 2025/8/16 21:39:32

Web自动化测试的详细流程和步骤

🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快 Web自动化测试是软件测试中非常重要的一种测试方法，它通过编写脚本来模拟人工操作网页，从而实现对Web应用程序进行自动化测试的过程。为了保…...

编程日记 2025/8/24 9:25:05

记录一个坑关于STM32 ARM Compiler Version

在用 Keil 进行 STM32 开发的时候，一开始下载，下载的 ARM 编译器是 Version6，他就不兼容老的代码，就很抽象。所以必须要更换编译器。可以去官网下载编译器 Downloads - Arm Developer ，也可以自己找资源哈&#xff…...

编程日记 2025/8/24 18:20:32

TCP实现多线程远程命令执行

1.上一篇篇代码改进 bind的绑定第一个是对象，其余的都是参数，传给一个类需要this指针，所以有&r 错误地方是智能指针的参数要加&，thread.name()要删除 2.介绍需要用到函数 popen函数 FILE *popen(const char *command, …...

编程日记 2025/8/25 8:53:58

【MySQL】索引特性

文章目录 👉没有索引可能会有什么问题👈👉认识磁盘👈前置知识MySQL 与磁盘磁盘定位扇区结论磁盘随机访问与连续访问MySQL 与磁盘交互基本单位 👉MySQL 的整体轮廓👈👉索引的理解👈建…...

编程日记 2025/8/25 5:01:17

红宝书第四十七讲：Node.js服务器框架解析：Express vs Koa 完全指南

红宝书第四十七讲：Node.js服务器框架解析：Express vs Koa 完全指南资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、框架定位：HTTP服务器的工具箱共同功能： 快…...

编程日记 2025/8/25 17:13:40

SDK游戏盾ip可以破解吗

从技术实现和法律合规性角度，不建议也不应尝试破解SDK游戏盾的IP防护机制。以下是详细分析： 一、法律与道德风险违法行为破解游戏盾的IP防护属于非法侵入计算机信息系统或破坏网络安全的行为，可能…...

编程日记 2025/8/23 17:19:24

eBay东南亚爆单密码：72小时交付计划如何重构厦门仓+东南亚供应链？

2024年东南亚电商市场规模预计突破2340亿美元，年复合增长率达18%。eBay最新战略将厦门纳入海外仓核心节点，推出“72小时交付计划”，通过“仓配转”一体化链路，助力中国卖家实现东南亚市场订单履约率提升10%，退货成本降…...

编程日记 2025/8/24 5:57:19

大语言模型

1.当前有哪些主流AI方向 1.1大语言模型方向 OpenAI的GPT语言模型系列，o3等推理模型系列综合能力强 anthrotic的claude系列，推理预测混合模型代码能力强 DeepSeek的V系列，R1推理模型 …...

编程日记 2025/8/24 8:11:54