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

第七节：进阶特性高频题-Vue3的ref与reactive选择策略

news 来源：原创 2025/7/13 4:19:31

ref：基本类型（自动装箱为{ value: … }对象）
reactive：对象/数组（直接解构会丢失响应性，需用toRefs）

一、核心差异对比

维度	ref	reactive
适用类型	基本类型（string/number/boolean）	对象/数组/集合类型
响应式实现	装箱为 `{ value: ... }` 对象，使用 `Object.defineProperty` 代理 `value` 属性	基于 `Proxy` 代理整个对象
解构响应性	天然支持，通过 `.value` 访问	需配合 `toRefs` 保持解构后的响应性
模板语法	自动解包（模板中无需 `.value`）	直接访问属性，无需额外处理
TS 类型支持	显式声明类型（如 `Ref<string>`）	自动推断对象属性类型

二、选择策略与最佳实践

基础类型数据
• 强制使用 ref：string/number/boolean 等原始类型必须用 ref 包装

const count = ref(0) // 类型推断为 Ref<number>
const name = ref<string>('') // 显式类型声明

对象/数组类型
• 优先使用 reactive：当需要维护整体对象引用时

const user = reactive({name: 'Alice',age: 25,address: { city: 'Beijing' }
})

• ref 的特殊场景：

◦ 需要整体替换对象时（reactive 无法直接赋值）

```typescript
const config = ref({ theme: 'dark' })
config.value = { theme: 'light' } // 有效
```

◦ 组合式函数返回需要统一处理

```typescript
function useFeature() {const state = reactive({ x: 0, y: 0 })return { state: toRef(state) } // 返回 Ref 保持统一接口
}
```

解构场景处理
• reactive 解构必须使用 toRefs：保持响应性链路

const state = reactive({ a: 1, b: 2 })
const { a, b } = toRefs(state) // a 和 b 为 Ref 类型

• 嵌套对象处理：结合 toRef 深度解构

const nested = reactive({ obj: { x: 1 } })
const xRef = toRef(nested.obj, 'x') // 获取深层属性 Ref

性能优化建议
• 避免过度使用 reactive：浅层对象优先使用 ref + shallowRef

const shallowObj = shallowRef({ data: null }) // 仅跟踪 .value 变化

• 大型对象分块处理：将相关属性分组为多个 reactive 对象

const formData = reactive({basicInfo: { name: '', age: 0 },contact: { email: '', phone: '' }
})

三、典型问题与解决方案

响应性丢失问题
• 错误示例：直接解构 reactive 对象

const state = reactive({ a: 1 })
let { a } = state // ❌ 失去响应性

• 正确做法：使用 toRefs 转换

const state = reactive({ a: 1 })
const { a } = toRefs(state) // ✅ 保持响应性

类型推断增强
• 复杂对象类型定义：通过接口约束 reactive

interface User {name: stringage: number
}
const user = reactive<User>({ name: '', age: 0 })

• Ref 联合类型处理：使用泛型或类型断言

const data = ref<string | number>('init') // 联合类型
const value = ref(null) as Ref<number | null> // 类型断言

异步更新陷阱
• 批量更新优化：reactive 的深层响应 vs ref 的浅层触发

const list = reactive([1, 2, 3])
list.push(4) // ✅ 触发更新const arr = ref([1, 2, 3])
arr.value = [...arr.value, 4] // ✅ 必须替换引用

四、原理级对比

机制	ref	reactive
响应式追踪	追踪 `.value` 属性的 get/set 操作	深度代理对象，追踪所有属性访问
内存开销	每个 ref 创建独立包装对象	共享 Proxy 处理器，内存占用更优
嵌套处理	自动对对象值调用 `reactive`	递归代理所有嵌套对象
引用替换	支持整体替换 `.value`	只能修改属性，不能替换整个对象

五、综合选择流程图

判断数据类型 → 是否基本类型？ → 是 → 使用 ref↓ 否
是否需要整体替换？ → 是 → 使用 ref 包裹对象↓ 否
是否需要深度解构？ → 是 → reactive + toRefs↓ 否
是否处理集合类型？ → 是 → reactive↓ 否
默认使用 reactive

总结：
• ref 是通用解决方案，尤其适合基本类型和需要引用替换的场景

• reactive 专为对象设计，提供更自然的深度响应式访问

• 结合 toRefs/toRef 解构和 TypeScript 类型系统，可构建类型安全且高维护性的响应式代码

第七节：进阶特性高频题-Vue3的ref与reactive选择策略

ref：基本类型（自动装箱为{ value: … }对象） reactive：对象/数组（直接解构会丢失响应性，需用toRefs） 一、核心差异对比维度refreactive适用类型基本类型（string/number/boolean&a…...

编程日记 2025/7/13 4:19:31

Redis 详解：安装、数据类型、事务、配置、持久化、订阅/发布、主从复制、哨兵机制、缓存

目录 Redis 安装与数据类型安装指南 Windows Linux 性能测试基本知识数据类型 String List（双向列表） Set（集合） Hash（哈希） Zset（有序集合） 高级功能地理位置&am…...

编程日记 2025/7/13 3:57:57

第十篇：系统分析师第三遍——7、8章

目录一、目标二、计划三、完成情况四、意外之喜(最少2点)1.计划内的明确认知和思想的提升标志2.计划外的具体事情提升内容和标志五、总结一、目标通过参加考试，训练学习能力，而非单纯以拿证为目的。 1.在复习过程中，训练快速阅读能力、掌…...

编程日记 2025/6/29 9:28:28

从 Vue 到 React：React.memo + useCallback 组合技

目录一、Vue 与 React 的组件更新机制对比二、React.memo 是什么？三、常见坑：为什么我用了 React.memo 还是会重新渲染？四、解决方案：useMemo / useCallback 缓存引用五、Vue 3 中有类似的性能控制需求吗？六、组合优化…...

编程日记 2025/7/11 18:21:37

1656打印路径-Floyd/图论-链表/数据结构

蓝桥账户中心 1.税收： “城市的税收”：所以是中介点的税收，经过该点后加上 2.路径： 用数组存储前驱节点从而串成链表 pre[ i ][ j ]代表的是从 i 到 j 的最短路径上 j 的前驱节点是什么那么便可以pre[ i ][ j ]k 把k加入pa…...

编程日记 2025/7/6 10:14:52

Linux网络编程从集线器到交换机的网络通信全流程——基于Packet Tracer的深度实验

这里我们先下载一个软件：Packet Tracer 用来搭建网络拓扑图的，是模拟和查看数据在网络中传输的详细过程的在软件这里可以添加设备知识点1【集线器】（Hub） 1、先配置一下主机的IP 这里我们设置IP一定要在同一个网段&#xff…...

编程日记 2025/7/11 8:40:10

深入学习Axios：现代前端HTTP请求利器

文章目录深入学习Axios：现代前端HTTP请求利器一、Axios简介与安装什么是Axios？安装Axios 二、Axios基础使用发起GET请求发起POST请求并发请求三、Axios高级特性创建Axios实例配置默认值拦截器取消请求四、Axios与TypeScript五、最佳实践1. 封装Axios2…...

编程日记 2025/7/7 23:22:13

FANUC机器人GI与GO位置数据传输设置

FANUC机器人GI与GO位置数据传输设置（整数小数分开发） 一、概述在 Fanuc 机器人应用中，如果 IO 点位足够，可以利用机器人 IO 传输位置数据及偏移位置数据等。二、操作步骤 1、确认通讯软件安装首先确认机器人控制柜已经安装…...

编程日记 2025/7/12 2:23:08

微服务 RabbitMQ 组件的介绍、安装与使用详解

微服务 RabbitMQ 组件的介绍、安装与使用在现代微服务架构中，服务之间的通信通常采用消息队列的方式，来解耦服务之间的依赖、提高系统的可靠性和扩展性。RabbitMQ 作为一种高效、可靠的消息队列系统，已经广泛应用于微服务架构中。本文将介绍…...

编程日记 2025/7/12 11:37:03

Vue3速通笔记

Vue3入门到实战尚硅谷Vue3入门到实战，最新版vue3TypeScript前端开发教程 1. Vue3简介 2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n经历了：4800次提交、40个RFC、600次PR、300贡献者官方发版地…...

编程日记 2025/7/11 11:20:20

Spring Boot 项目：如何在 JAR 运行时读取外部配置文件

在 Spring Boot 项目中，我们常常需要在生产环境中灵活地配置应用，尤其是当我们将项目打包为 JAR 文件时，如何在运行时通过外部配置文件（如 application.yml 或 application.properties）替换 JAR 内部的配置就变得尤为重…...

编程日记 2025/7/9 16:10:18

Certimate本地化自动化 SSL/TLS 证书管理解决方案

一、背景与挑战多域名管理复杂运维团队往往需要为多个子域、泛域名乃至不同项目的域名分别申请证书，手动操作容易出错且耗时。续期易忘风险主流免费证书（如 Let’s Encrypt）有效期仅 90 天，需要定期续期，人工监控门…...

编程日记 2025/7/7 9:04:03

vue+flask+lstm高校舆情分析系统 | 可获取最新数据！

文章结尾部分有CSDN官方提供的学长联系方式名片文章结尾部分有CSDN官方提供的学长联系方式名片关注B站，有好处！ 编号：F020 gaoxiao 架构：vueflaskLSTMMySQL 功能： 微博信息爬取、情感分析、基于负面消极内容舆情分…...

编程日记 2025/6/29 9:26:58

Cisco-Torch：思科设备扫描器！全参数详细教程！Kali Linux教程！

简介 cisco-torch 与同类工具的主要区别在于其广泛使用 fork 技术，可以在后台启动多个扫描进程，从而最大限度地提高扫描效率。此外，它还可以根据需要同时使用多种应用层指纹识别方法。我们希望能够快速发现运行 Telnet、SSH、Web、NTP、TFTP…...

编程日记 2025/7/7 5:41:00

Go协程的调用与原理

Goroutine Go不需要像C或者Java那样手动管理线程，Go语言的goroutine机制自动帮你管理线程。使用goroutine、 Go语言中使用goroutine非常简单，只需要在调用函数的时候在前面加上go关键字，就可以为一个函数创建一个goroutine。一个gorout…...

编程日记 2025/7/7 9:02:17

论文精读：大规模MIMO波束选择问题的量子计算解决方案

论文精读：大规模MIMO波束选择问题的量子计算解决方案概要： 随着大规模多输入多输出系统（MIMO）在5G及未来通信技术中的应用，波束选择问题（MBS）成为提升系统性能的关键。传统的波束选择方法面临计…...

编程日记 2025/7/6 8:49:36

将 MySQL 8 主从复制延迟优化到极致

目录一、网络资源不足引起的复制延迟 1. 执行监控确认延迟原因 2. 估算所需带宽 （1）基本公式 （2）实际测量方法二、大事务或大查询引起的复制延迟 1. 主库大事务 2. 从库大查询 3. 估算所需 I/O 能力 （1&am…...

编程日记 2025/7/12 2:03:30

路由与OSPF学习

【路由是跨网段通讯的必要条件】路由指的是在网络中，数据包从源主机传输到目的主机的路径选择过程。路由通常涉及以下几个关键元素： 1.路由器：是一种网络设备，负责将数据包从一个网络传输到另一个网络。路由器根据路由表来决定…...

编程日记 2025/7/11 10:47:43

Spring Security：企业级安全架构的设计哲学与工程实践

一、核心架构与设计理念 Spring Security作为Spring生态中的安全基石，其架构设计遵循**“分层过滤"与"组件化扩展”**两大原则。整个安全框架本质上是一个由多个过滤器构成的链式处理模型（Filter Chain），每个过滤器负责…...

编程日记 2025/7/13 1:10:02

NLP高频面试题（五十二）——BERT 变体详解

在现代自然语言处理领域，BERT 系列模型不断演进，衍生出多种变体，它们通过改进预训练任务、模型结构和训练策略，在不同应用场景下取得了更优表现。本文首先概览主要 BERT 变体（如 ALBERT、RoBERTa、ELECTRA、SpanBERT、Transformer-XL 等），随后针对以下几个关键问题逐一展…...

编程日记 2025/6/29 11:55:00

C++Primer 编程练习第二章

最近想重新看一下CPrimer，顺便敲一下他的编程练习题，虽然很简单，但是就当是锻炼一下vim的熟练度和手感由于按照章节顺序来说是初学者，不会对输入内容做过多的判断，只对问题作出基本实现第二章 1 #include <ios…...

编程日记 2025/7/5 15:50:34

Vue.js 新手小白指南：从起源到实战

🌟 Vue 的来源 Vue.js 由**尤雨溪（Evan You）**在2014年创建，最初是作为个人项目开发，灵感来源于他在 Google 使用 AngularJS 的经验。Vue 的设计目标是提供一个更轻量级、更易上手的前端框架。如今，Vue …...

编程日记 2025/6/29 11:49:13

策略模式：动态切换算法的设计智慧

策略模式：动态切换算法的设计智慧一、模式核心：定义一系列算法并可相互替换在软件开发中，常常会遇到需要根据不同情况选择不同算法的场景。例如，在电商系统中，根据不同的促销活动（如满减、折扣、赠品&a…...

编程日记 2025/7/10 4:34:03

Vm免安装直接使用虚拟机win7系统

教程一、下载并解压资料里面的vmx压缩包二、使用Vm软件打开刚刚解压的vmx文件即可使用虚拟机的win7系统资料下载点击下载...

编程日记 2025/7/8 17:19:33

LSTM-GAN生成数据技术

1. 项目概述本项目利用生成对抗网络（GAN）技术来填补时间序列数据中的缺失值。项目实现了两种不同的GAN模型：基于LSTM的GAN（LSTM-GAN）和基于多层感知机的GAN（MLP-GAN），并对两种模型…...

编程日记 2025/6/29 10:13:59

26、C# 中是否可以继承String类？为什么？

在 C# 中，不能直接继承 String 类（System.String）。这是由于以下几个原因： 1、String 类是 sealed 的 String 类在 .NET 中被标记为 sealed，这意味着它是一个密封类，不能被继承。 sealed 关键字的作用是防…...

编程日记 2025/7/7 2:29:33

gem5教程第五章了解gem5默认配置脚本

在本章中，我们将探讨如何使用gem5附带的默认配置脚本。 gem5附带了许多配置脚本，使您能够非常快速地使用gem5。然而，一个常见的陷阱是在不完全理解所模拟内容的情况下使用这些脚本。在使用gem5进行计算机架构研究时，充分了解您正在模拟的系统非常重要。本章将引导您了解默…...

编程日记 2025/6/29 9:28:37

什么是鸿蒙南向开发？什么是北向开发？

文章目录鸿蒙南向开发 vs 北向开发：底层与生态的双向赋能一、鸿蒙南向开发：连接硬件的底层基石二、鸿蒙北向开发：构建全场景应用生态三、南向与北向：互补与协同四、如何选择开发方向?结语鸿蒙南向开发 vs 北向开发：…...

编程日记 2025/7/9 13:40:13

蓝桥杯 19. 最大比例

最大比例原题目链接题目描述 X 星球的某个大奖赛设了 M 级奖励。每个级别的奖金是一个正整数。并且，相邻两个级别间的比例是一个固定值，也就是说：所有级别的奖金构成一个等比数列。例如： 奖金数列为 16, 24, 36, 54&…...

编程日记 2025/6/29 9:27:03

制造业数字化转型标杆解析：从冀凯机电到君乐宝的启示

1. 执行摘要数字化转型已成为现代制造业提升竞争力、实现高质量发展的核心驱动力。本文旨在通过深入剖析冀凯装备制造股份有限公司（冀凯机电）和君乐宝乳业集团（君乐宝）两家不同行业背景企业的数字化转型实践，提炼可供…...

编程日记 2025/6/29 9:27:04

【OSCP-vulnhub】Raven-2

目录端口扫描本地/etc/hosts文件解析目录扫描： 第一个flag 利用msf下载exp flag2 flag3 Mysql登录查看mysql的运行权限 MySql提权：UDF 查看数据库写入条件查看插件目录查看是否可以远程登录 gcc编译.o文件创建so文件创建临时监听…...

编程日记 2025/7/12 10:30:12

配置MambaIRv2: Attentive State Space Restoration的环境

github上代码的地址： csguoh/MambaIR: [ECCV2024, CVPR2025] MambaIR and MambaIRv2! 一开始直接输入命令 conda env create -f environment.yaml 安装了半天爆出来好几个错误，其中一个是没有nvcc 输入以下命令： module avail 发现没有…...

编程日记 2025/6/29 9:27:00

4.23晚间工作总结

主要工作：将ClassicDetail界面拆分成utils,apis,stores,css,vue多个文件，方便后续重用具体代码截图：...

编程日记 2025/7/7 15:05:54

Maven 项目中引入本地 JAR 包

在日常开发过程中，我们有时会遇到一些未上传到 Maven 中央仓库或公司私有仓库的 JAR 包，比如第三方提供的 SDK 或自己编译的库。这时候，我们就需要将这些 JAR 包手动引入到 Maven 项目中。本文将介绍两种常见方式：将 JAR 安装到本…...

编程日记 2025/6/29 11:12:07

SpringBoot整合SSE，基于okhttp

一、引入依赖 <dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.10.0</version> </dependency> <dependency><groupId>com.squareup.okhttp3</groupId><…...

编程日记 2025/7/8 9:00:20

从云端到边缘：云原生后端架构在边缘计算中的演进与实践

📝个人主页🌹：慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言：为何云原生后端正在走向边缘？随着物联网（IoT）、5G 和实时应用的快速发展，越来越多的数据在终端产生并需要即时处理。传统云计算虽强大，但将所有数据上送云端再处理，带来高延迟与带宽压力。…...

编程日记 2025/6/29 9:27:09

pytest心得体会

一、如何单独运行某条用例在参数化测试中总有些用例失败，由于前后置数据的关系需要单独运行那条用例如何运行呢方法一：直接查看控制台运行用例确定是[2-case_data8] pytest.main(["-sv","testcase/违规告警/test_违规告警_非合同车…...

编程日记 2025/7/8 19:23:01

《Cesium 中两点绘制线的实现：实线、虚线、动态线、流动线详解》

摘要在 Cesium 三维地球可视化开发中，两点之间绘制线是常见的需求。本文详细介绍如何在 Cesium 中实现两点间绘制实线、虚线、动态线和流动线，并提供完整的代码示例，方便开发者快速上手，满足不同场景下的可视化需求。一、环境与依赖本文代码基于 Cesium 库进行开发，…...

编程日记 2025/6/29 12:11:53

【EasyPan】MySQL FIELD() 函数实现自定义排序

【EasyPan】项目常见问题解答（自用&持续更新中…）汇总版 MySQL FIELD() 函数解析一、FIELD() 函数技术解析 /* 基础语法 */ FIELD(column_name, value1, value2, ..., valueN)核心特性特性说明返回值机制返回字段值在参数列表中的索引位置&…...

编程日记 2025/7/10 4:34:05

搭建TypeScript单元测试环境

我们在学习TypeScript的时候如果能够搭建一个单元测试的环境，那写些demo会很简单，下面我们使用jest来搭建一个单元测试环境 Jest 是一个由 Facebook 开发并开源的 JavaScript 测试框架，被广泛应用于前端和 Node.js 项目的单元测试。以下是关…...

编程日记 2025/7/7 22:02:28

Vue3父子组件数据同步方法

在 Vue 3 中，当子组件需要修改父组件传递的数据副本并同步更新时，可以通过以下步骤实现： 方法 1：使用 v-model 和计算属性（实时同步） 父组件： vue <template><ChildComponent v-mo…...

编程日记 2025/7/7 10:39:03

免费且开源的企业级监控解决方案：Zabbix

一、Zabbix 简介 Zabbix 是一款功能强大的企业级开源监控解决方案。它可以监控各种 IT 基础设施组件，包括网络设备、服务器、虚拟机、云服务、应用程序和数据库等。Zabbix 提供实时的监控、告警、报表和可视化功能，帮助用户及时发现和解决 IT 系统中的问…...

编程日记 2025/6/29 9:27:11

高并发系统的通用设计方法是什么？

背景高并发系统的通用设计方法是解决系统在面对大量用户访问时的性能瓶颈问题。当系统遇到性能瓶颈时，通常是因为某个单点资源（如数据库、后端云服务器、网络带宽等）达到了极限。为了提升整个系统的容量，需要找到这个瓶颈资源…...

编程日记 2025/7/7 9:04:32

ubuntu系统下部署使用git教程

在ubuntu系统下部署并使用git教程 1.下载并安装 sudo apt update sudo apt install git2.检验安装是否成功 git --version若输出git版本号即为成功。 3.配置参数 git config --global user.name "你的名字" git config --global user.email "你的邮箱&quo…...

编程日记 2025/7/9 10:11:05

redis client.ttl(key)

对应 Redis 的 TTL 命令： bash 复制下载 TTL key 使用示例 1. 基本用法 java 复制下载 try (Jedis jedis jedisPool.getResource()) {long ttl jedis.ttl("user:1001:session");if (ttl > 0) {System.out.println("键将在 " t…...

编程日记 2025/7/5 15:58:23

基于ACL方式手动建立站点间 IPSec 隧道

换句话说不使用 IKE 自动协商，而是静态配置密钥和 SPI（安全参数索引）来配置隧道规则环境基础还是使用eNSP软件进行模拟，等后面再更新实际通信中的环境没有框架，就没有基本思路还是使用前面文章GRE VPN的拓扑&…...

编程日记 2025/7/9 21:38:08

电池大脑的基准测试及AI拓展

从为我们的智能手机供电到驱动电动汽车，我们的日常生活都离不开锂离子电池（LIB）。但是，理解其复杂的内部运作并预测其性能需要精密的工具。由此引入了多孔电极理论（PET）模型，我们可以将其视为模…...

编程日记 2025/7/12 11:14:40

数据通信学习笔记之OSPF的基础术语

Router ID RouterID 用于在自治系统中唯一标识一省运行 OSPF 的路由器，它是一个 32 位的无符号整数配置完成后，如果需要修改 Router ID 的话，需要重启进程才能上生效 <Huawei>reset ospf 1 process // 重启 ospf 进程 1 Route…...

编程日记 2025/7/12 18:31:41

Android Cordova 开发 - Cordova 快速入门（Cordova 环境配置、Cordova 第一个应用程序）

一、Cordova 1、Cordova 概述 Cordova 是使用 HTML，CSS 和 JavaScript 构建混合移动应用程序的平台 2、Cordova 特征 （1）命令行界面（Cordova CLI） 这是可用于启动项目，构建不同平台的进程，…...

编程日记 2025/6/29 11:02:30

AndroidAutomotive模块介绍（四）VehicleHal介绍

前言前面的文章中，描述了 Android Automotive 的框架中应用、Framework 层服务等知识，本篇文章将会继续按照 Android Automotive 框架介绍 Vehicle Hal 层服务的内容。上一篇：AndroidAutomotive模块介绍（三）CarSer…...

编程日记 2025/7/12 17:10:54

相关文章：