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

Vue 3 中的 toRef 与 toRefs：使用与案例解析

news 来源：原创 2025/5/21 11:24:54

在 Vue 3 的响应式系统中，toRef 和 toRefs 是两个非常实用的工具函数。它们主要用于将响应式对象的属性转换为单独的 ref，以便在模板或逻辑中更方便地使用。本文将详细介绍 toRef 和 toRefs 的用法，并通过一个老师信息的案例来演示它们的实际应用。

1. `toRef` 与 `toRefs` 的定义

1.1 `toRef`

toRef 用于从响应式对象中提取一个属性，并将其转换为一个 ref。这个 ref 会与源对象的属性保持同步。

import { reactive, toRef } from 'vue';const state = reactive({name: 'Alice',age: 30
});const nameRef = toRef(state, 'name'); // 将 state.name 转换为 ref
console.log(nameRef.value); // Alice

1.2 `toRefs`

toRefs 用于将整个响应式对象的所有属性转换为一个包含多个 ref 的对象。每个 ref 都会与源对象的对应属性保持同步。

import { reactive, toRefs } from 'vue';const state = reactive({name: 'Alice',age: 30
});const stateRefs = toRefs(state); // 将 state 的所有属性转换为 ref
console.log(stateRefs.name.value); // Alice
console.log(stateRefs.age.value); // 30

2. `toRef` 与 `toRefs` 的区别

特性	`toRef`	`toRefs`
作用对象	单个属性	整个对象的所有属性
返回值	单个 `ref`	包含多个 `ref` 的对象
适用场景	需要提取单个属性时使用	需要解构或传递多个属性时使用
与源对象的关系	保持与源对象属性的响应式连接	保持与源对象所有属性的响应式连接

3. 案例：老师信息管理

假设我们有一个老师的信息对象，包含姓名、年龄和教授的课程。我们将使用 toRef 和 toRefs 来管理这些信息，并演示如何修改数据。

3.1 初始代码

<template><div><h2>老师信息</h2><p>姓名: {{ name }}</p><p>年龄: {{ age }}</p><p>课程: {{ course }}</p><button @click="updateTeacher">修改老师信息</button></div>
</template><script>
import { reactive, toRef, toRefs } from 'vue';export default {setup() {// 定义老师信息的响应式对象const teacher = reactive({name: '张老师',age: 40,course: '数学'});// 使用 toRef 提取单个属性const nameRef = toRef(teacher, 'name');// 使用 toRefs 提取所有属性const teacherRefs = toRefs(teacher);// 修改老师信息的函数const updateTeacher = () => {nameRef.value = '李老师'; // 修改姓名teacherRefs.age.value = 45; // 修改年龄teacher.course = '物理'; // 直接修改源对象属性};return {...teacherRefs, // 将 teacherRefs 解构到模板中updateTeacher};}
};
</script>

3.2 代码解析

toRef 的使用：
- 我们从 teacher 对象中提取了 name 属性，并将其转换为 nameRef。
- 修改 nameRef.value 会同步更新 teacher.name。
toRefs 的使用：
- 我们将 teacher 对象的所有属性转换为 teacherRefs。
- 在模板中通过解构 teacherRefs 来访问 name、age 和 course。
- 修改 teacherRefs.age.value 会同步更新 teacher.age。
直接修改源对象：
- 我们也可以直接修改 teacher.course，因为 teacher 本身是响应式的。
按钮点击事件：
- 点击按钮后，name、age 和 course 都会被修改，并触发视图更新。

4. 修改代码并说明关联关系

4.1 修改代码

假设我们需要添加一个功能：显示老师的教龄（teachingYears），并根据年龄动态计算教龄。

<template><div><h2>老师信息</h2><p>姓名: {{ name }}</p><p>年龄: {{ age }}</p><p>教龄: {{ teachingYears }}</p><p>课程: {{ course }}</p><button @click="updateTeacher">修改老师信息</button></div>
</template><script>
import { reactive, toRef, toRefs, computed } from 'vue';export default {setup() {const teacher = reactive({name: '张老师',age: 40,course: '数学'});const nameRef = toRef(teacher, 'name');const teacherRefs = toRefs(teacher);// 计算教龄const teachingYears = computed(() => teacher.age - 22);const updateTeacher = () => {nameRef.value = '李老师';teacherRefs.age.value = 45;teacher.course = '物理';};return {...teacherRefs,teachingYears,updateTeacher};}
};
</script>

4.2 关联关系说明

toRef 和 toRefs 的作用：
- toRef 和 toRefs 将响应式对象的属性转换为 ref，使得我们可以更方便地在模板或逻辑中使用这些属性。
- 它们与源对象保持响应式连接，修改 ref 的值会同步更新源对象。
计算属性的使用：
- 我们使用 computed 计算了 teachingYears，它依赖于 teacher.age。
- 当 teacher.age 被修改时，teachingYears 会自动更新。
响应式数据的流动：
- 修改 nameRef.value → 更新 teacher.name → 触发视图更新。
- 修改 teacherRefs.age.value → 更新 teacher.age → 触发 teachingYears 重新计算 → 触发视图更新。
- 直接修改 teacher.course → 触发视图更新。

5. 总结

toRef：适合提取单个属性并保持与源对象的响应式连接。
toRefs：适合解构整个响应式对象，方便在模板或逻辑中使用多个属性。
关联关系：toRef 和 toRefs 创建的 ref 会与源对象保持同步，修改 ref 的值会触发视图更新。

通过本文的案例和代码示例，希望你能更好地理解 toRef 和 toRefs 的用法，并在实际项目中灵活运用它们来管理响应式数据！

Vue 3 中的 toRef 与 toRefs：使用与案例解析

在 Vue 3 的响应式系统中，toRef 和 toRefs 是两个非常实用的工具函数。它们主要用于将响应式对象的属性转换为单独的 ref，以便在模板或逻辑中更方便地使用。本文将详细介绍 toRef 和 toRefs 的用法，并通过一个老师信息的案例来演示它们的实际…...

编程日记 2025/5/21 11:24:54

如何让Dev-C++支持C++11及以上标准

目录问题描述解决方案步骤1：打开编译选项问题描述在Dev-C中使用C11/17/20新特性（如pop_back()等）时，可能出现编译错误： #include <iostream> #include<string> using namespace std; int main() {str…...

编程日记 2025/5/20 13:19:43

java8-日期时间Api

目录 LocalDate更新时间LocalTimeLocalDateTimeInstantPeriod Duration格式化、解析日期-时间对象时区 java.util.Date java.util.Calendar 不支持时区线程不安全月份从0起线程不安全，只有包裹在ThreadLocal中才安全 java.text.DateFormat java.text.SimpleDateFo…...

编程日记 2025/5/21 10:34:50

电脑无法开机，重装系统后没有驱动且驱动安装失败

电脑无法开机，重装系统后没有驱动且驱动安装失败前几天电脑突然坏了，电脑卡住后，强制关机，再开机后开机马上就关机。尝试无数次开机后失败，进入BIOS界面，发现已经没有Windows系统了。重新安装系统后&…...

编程日记 2025/5/20 13:28:54

Vue.js 传递路由参数和查询参数

Vue.js 传递路由参数和查询参数在 Vue.js 开发中，Vue Router 提供了灵活的方式来处理路由参数和查询参数，使得组件能够根据不同的路径或查询条件渲染相应的内容。路由参数路由参数（也称为路径参数）是 URL 路径的一部分&…...

编程日记 2025/5/21 7:01:46

Java 反射机制介绍

Java学习资料 Java学习资料 Java学习资料一、引言在 Java 编程里，反射机制是一项强大且独特的特性。它赋予程序在运行时动态地获取类的信息，并且可以操作类或对象的属性、方法和构造函数等。借助反射机制，程序的灵活性和可扩展性得到显著…...

编程日记 2025/5/17 12:58:10

Final2x--开源AI图片放大工具

Final2x--开源AI图片放大工具链接：https://pan.xunlei.com/s/VOHSklukQAquUn3GE7eHJXfOA1?pwdr3r3#...

编程日记 2025/5/21 1:39:58

TCP全连接队列

1. 理解 int listen(int sockfd, int backlog) 第二个参数的作用 backlog：表示tcp全连接队列的连接个数1。如果连接个数等于backlog1，后续连接就会失败，假设tcp连接个数为0，最大连接个数就为1，并且不accept获取连接…...

编程日记 2025/5/17 22:54:38

前端力扣刷题 | 4：hot100之子串

560. 和为K的子数组给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。示例： 输入：nums [1,1,1], k 2 输出：2 法一：暴力法 var subar…...

编程日记 2025/5/18 0:41:15

【精选】基于数据挖掘的招聘信息分析与市场需求预测系统职位分析、求职者趋势分析职位匹配、人才趋势、市场需求分析数据挖掘技术职位需求分析、人才市场趋势预测

博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2025/5/17 11:26:12

字节跳动发布UI-TARS，超越GPT-4o和Claude，能接管电脑完成复杂任务

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/5/18 6:57:01

2025课题推荐——USBL和DVL的误差建模与补偿

在海洋探测与研究中，定位技术的准确性至关重要。超短基线（USBL）和多普勒速度计（DVL）是两种广泛应用于水下定位和导航的技术，它们在深海探测、海洋工程和水下机器人等领域发挥着重要作用。然而，这…...

编程日记 2025/5/16 10:40:15

mysql_use_result的概念和使用案例

mysql_use_result 是 MySQL C API 中的一个函数，它用于检索一个结果集，并且不同于 mysql_store_result，它不会立即将整个结果集读入客户端。相反，它会初始化一个结果集，客户端随后可以通过调用 mysql_fetch_row 来逐行…...

编程日记 2025/5/19 1:26:37

微信小程序date picker的一些说明

微信小程序的picker是一个功能强大的组件，它可以是一个普通选择器，也可以是多项选择器，也可以是时间、日期、省市区选择器。官方文档在这里这里讲一下date picker的用法。 <view class"section"><view class"se…...

编程日记 2025/5/17 5:04:07

FLTK - FLTK1.4.1 - demo - adjuster.exe

文章目录 FLTK - FLTK1.4.1 - demo - adjuster.exe概述笔记根据代码，用fluid重建一个adjuster.fl 备注 - fluid生成的代码作为参考代码好了修改后可用的代码END FLTK - FLTK1.4.1 - demo - adjuster.exe 概述想过一遍 FLTK1.4.1的demo和测试工程，工程…...

编程日记 2025/5/21 7:15:15

神经网络入门：从感知机到激活函数

什么是神经网络神经网络（Neural Network） 是一种模拟生物神经系统工作方式的计算模型，是机器学习和深度学习的核心组成部分。它的设计灵感来源于人脑中神经元之间的连接和信息传递方式。神经网络通过模拟这种结构，能够从数据中学…...

编程日记 2025/5/16 17:41:16

第04章 13 管道信息对象分类说明

在VTK（Visualization Toolkit）中，管道信息（Pipeline Information）是一个重要的概念，它允许管道中的不同对象之间传递元数据和执行策略。这些信息对象帮助协调管道中各个组件的操作，确保数据在传…...

编程日记 2025/5/18 8:31:41

AI 发展是否正在放缓？AI 发展将驶向何方？

编者按： 人工智能真的已经遇到发展瓶颈了吗？随着 OpenAI、Google 和 Anthropic 等顶级 AI 公司纷纷表示新模型开发收益在减少，这个问题引发了整个行业的深度思考。我们今天为大家带来的这篇文章，作者的核心观点是：虽然…...

编程日记 2025/5/16 12:56:26

一个简单的自适应html5导航模板

一个简单的 HTML 导航模板示例，它包含基本的导航栏结构，同时使用了 CSS 进行样式美化，让导航栏看起来更美观。另外，还添加了一些 JavaScript 代码，用于在移动端实现导航菜单的展开和收起功能。 PHP <!DOCTYPE htm…...

编程日记 2025/5/19 6:38:54

CrypTen——基于pytorch的隐私保护机器学习框架

目录一、CrypTen概述二、应用场景三、CrypTen优势四、CrypTen技术解析 1.基于pytorch的构建基础 2.核心密码学原语 3.加密模型训练流程五、传统隐私保护技术与CrypTen的对比 1.传统隐私保护技术介绍 2.CrypTen与传统隐私保护技术的区别六、CrypTen的环境配置…...

编程日记 2025/5/20 17:45:54

日志模块升级，采用sleuth实现日志链路追踪

文章目录 1.common-log4j2-starter1.目录结构2.pom.xml 引入sleuth3.application.yml 开启Sleuth4.log4j2-spring.xml xiugai 日志输出格式5.TraceIdFilter.java 输出带有TraceId的箭头6.LogAspect.java 更改AOP的范围（因为后面出现了栈溢出问题）7.pom.x…...

编程日记 2025/5/21 10:25:48

84，【8】BUUCTF WEB [羊城杯 2020]Blackcat

进入靶场音乐硬控我3分钟回去看源码 <?php // 检查 POST 请求中是否包含 Black-Cat-Sheriff 和 One-ear 字段 // 如果任意一个字段为空，则输出错误信息并终止脚本执行 if(empty($_POST[Black-Cat-Sheriff]) || empty($_POST[One-ear])){die(请提供 Black-C…...

编程日记 2025/5/17 4:49:55

中信证券、安我保险-安我股保联合策略

中信证券2025年资本市场年会在深圳开幕,会议以“站上起跑线”为主题,对2025年全球金融市场、宏观经济与政策、A股市场投资策略、大类资产配置、资本市场新格局下的各经济领域发展趋势进行了全面展望。据悉,中信证券2025年资本市场年会,现场邀请了百余位顶尖学者、产业专家、企…...

编程日记 2025/5/16 17:33:06

WPF实战案例 | C# WPF实现大学选课系统

WPF实战案例 | C# WPF实现大学选课系统一、设计来源1.1 主界面1.2 登录界面1.3 新增课程界面1.4 修改密码界面二、效果和源码2.1 界面设计（XAML）2.2 代码逻辑（C#） 源码下载更多优质源码分享作者：xcLeigh 文章地址&a…...

编程日记 2025/5/21 3:26:30

如何在Spring Boot项目中高效集成Spring Security

1 Spring Security 介绍 Spring Security 是一个功能强大且高度可定制的安全框架，专为保护基于Java的应用程序而设计。它不仅提供了认证（Authentication）和授权（Authorization）的功能，还支持防止各种常见的安全攻击模式。本文将详细介绍Spring Security的主要特点、功能…...

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

浅谈Unity中Canvas的三种渲染模式

Overview UGUI通过 Canvas 组件渲染和管理UI元素。Canvas 是 UI 元素的容器，它决定了 UI 元素的渲染方式以及它们在屏幕上的显示效果。Canvas 有三种主要的渲染模式，每种模式有不同的用途和特点。本文将介绍这三种渲染模式 1. Screen Space - Overlay 模…...

编程日记 2025/5/20 9:06:47

组件中的emit

我们从页面向子组件传递参数时，我们可以使用props；我们从页面向子组件传递模板片段时，可以使用slots；当我们需要子组件传递参数给调用它的页面时，我们可以使用emit进行参数传递。例如： <template>…...

编程日记 2025/5/18 11:12:49

java发送邮件

文章目录需要的依赖发送邮件准备申请授权码配置文件测试代码遇到的问题需要的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><…...

编程日记 2025/5/18 17:50:47

网络安全 | F5-Attack Signatures-Set详解

关注：CodingTechWork 创建和分配攻击签名集可以通过两种方式创建攻击签名集：使用过滤器或手动选择要包含的签名。基于过滤器的签名集仅基于在签名过滤器中定义的标准。基于过滤器的签名集的优点在于，可以专注于定义用户感兴趣的攻击签名…...

编程日记 2025/5/11 5:45:13

依然走动态注册新建一个java类 package com.koohai.encutils;import android.content.Context; import android.content.pm.PackageInfo; import android.content.pm.PackageManager; import android.util.Log;import java.security.MessageDigest; import java.util.List; …...

编程日记 2025/5/20 1:20:54

性能测试丨JVM 性能数据采集

什么是JVM性能数据采集？ JVM性能数据采集是指通过一些工具和技术采集与Java虚拟机相关的性能数据。这些数据包括但不限于内存使用、CPU使用、垃圾回收（GC）行为、线程活动等。合理地分析这些数据，可以帮助我们找出系统的瓶颈&…...

编程日记 2025/5/16 17:41:12

MySQL 基础学习(3)：排序查询和条件查询

MySQL 查询与条件操作：详解与技巧在本文中，我们将探讨 MySQL 中的查询操作及其相关功能，包括别名、去重、排序查询和条件查询等，并总结一些最佳实践和注意事项。一、使用别名（AS） 在查询中&#xff0c…...

编程日记 2025/5/20 23:01:35

Autogen_core: Quickstart

代码 from dataclasses import dataclass from typing import Callablefrom autogen_core import DefaultTopicId, MessageContext, RoutedAgent, default_subscription, message_handlerdataclass class Message:content: intdefault_subscription class Modifier(RoutedAgen…...

编程日记 2025/5/18 18:03:39

1. toRef 与 toRefs 的定义

1.1 toRef

1.2 toRefs

2. toRef 与 toRefs 的区别