Vue3:toRef和toRefs的用法

一、情景说明

我们知道,Vue3中想要定义对象类型的响应式数据
可以通过reactive函数实现

如果,后端返回的对象,有很多的字段,我们想进行结构化赋值
但是,又想保证赋值后的变量也是响应式数据
那么,这个时候,就要用到toRef和toRefs函数

注意:toRef和toRefs函数只能作用在reactive创建的变量上!

二、案例

reactive创建的变量

    // 数据let person = reactive({name:'张三',age:18})

1、toRefs

    let {name,age} = toRefs(person)

2、toRef

    let nl = toRef(person,'age')

经过toRef和toRefs处理后
无论是person.age、age、nl变量,任何一个被修改,三者都会同时变化!

个人认为,这两个函数的好处,可能就是让编码更简便!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/738588.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法进阶之路:十大经典排序算法详解与实践

算法进阶之路:十大经典排序算法详解与实践 在计算机科学的世界里,排序算法是基础且至关重要的一环。无论是数据库查询、数据分析还是日常的编程任务,高效的排序算法都能显著提升程序的性能。本文将带你深入了解十大经典排序算法,…

BeyondCompared4提示“缺少评估信息或损坏”修复

BeyondCompared4提示“缺少评估信息或损坏”修复 使用 beyond compare4,在安装的30天后,出现“缺少评估信息”、“评估信息损坏”的提示 解决方法如下(Win11下亲测可行) 按 WinR 进入 打开Windows命令运行框,输入cmd …

Redis常见数据类型下

目录 Hash 哈希 常用指令 HSET HGET HEXISTS HDEL HKEYS HVALS HGETALL HMGET 内部编码 Hash类型和关系型数据库 缓存方式对比 List 列表 特点 常用命令 LPUSH LPUSHX RPUSH RPUSHX LRANGE LPOP / RPOP LINDEX LINSERT 阻塞(BLOCK)版…

无人机避障技术

无人机避障技术是现代无人机系统发展的重要组成部分,其核心目标是提升无人机的自主飞行能力,确保其在复杂环境中的安全性。本文将详细介绍无人机避障项目的背景、技术原理、实现过程、应用前景以及面临的挑战,以期为读者提供全面而深入的了解…

【Linux】文件缓冲区|理解文件系统

目录 预备知识 观察现象 第一:携带\n,不使用fork(),打印到显示器 第二:携带\n,使用fork(),打印到显示器 第三:携带\n,使用fork(),打印到文件里 第四:不携…

Android Studio

深入探索集成开发环境的魅力 在数字化和移动化的浪潮下,Android系统凭借其广泛的覆盖范围和深度的定制性,已在全球范围内占据显著的市场份额。为了支撑这一庞大的生态系统,一个强大且灵活的集成开发环境(IDE)应运而生…

如何选择适合的G口大流量服务器?

G口大流量服务器是指接入互联网的带宽达到1Gbps及以上,并且能够提供大量数据传输服务的服务器。那么如何选择适合的G口大流量服务器,RAK部落小编为您整理发布选择适合的G口大流量服务器需要考虑哪些关键点。 选择适合的G口大流量服务器时,应该…

JavaSec 基础之 CC1 链

文章目录 背景环境以及配置分析0x1 终点(利用点分析)0x20x30x310x320x33 0x040x05 背景 Apache Commons Collections是Apache提供的一个Java库,它扩展了Java自带的集合框架。通过这个库,咱们可以使用更多种类的集合类型,以及各种实用的集合操…

星星魔方

星星魔方 1,魔方三要素 (1)组成部件 6个中心块和8个角块和三阶魔方同构,另外每个面还有构成五角星的十个块。 (2)可执行操作 一共12种操作,其中6种是每个层顺时针旋转90度,另外6…

HTML静态网页成品作业(HTML+CSS)——家乡漳州介绍设计制作(1个页面)

🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有1个页面。 二、作品演示 三、代…

Python的特性——跟老吕学Python编程

Python的特性——跟老吕学Python编程 Python的特性1.Python易学易用2.Python是解释型语言3.Python是交互式的4.Python是一种多范式语言5.Python的标准库6.Python是开源的7.Python是跨平台的8.用于GUI应用程序的Python9.Python的数据库连接10.Python是可扩展的11.Python拥有活跃…

【golang】28、用 httptest 做 web server 的 controller 的单测

文章目录 一、构建 HTTP server1.1 model.go1.2 server.go1.3 curl 验证 server 功能1.3.1 新建1.3.2 查询1.3.3 更新1.3.4 删除 二、httptest 测试2.1 完整示例2.2 实现逻辑2.3 其他示例2.4 用 TestMain 避免重复的测试代码2.5 gin 框架的 httptest 一、构建 HTTP server 1.1…

ElementUI两个小坑

1.form表单绑定的是一个对象&#xff0c;表单里的一个输入项是对象的一个属性之一&#xff0c;修改输入项&#xff0c;表单没刷新的问题&#xff0c; <el-form :model"formData" :rules"rules" ref"editForm" class"demo-ruleForm"…

蓝牙耳机链接电脑莫名奇妙关机问题(QQ浏览器)

蓝牙耳机连接电脑听歌的时候&#xff0c;如果听歌软件是暴风影音&#xff0c;或者其它播放器&#xff0c;蓝牙不会自动关机&#xff0c;但如果是QQ浏览器&#xff0c;蓝牙耳机经常莫名其妙的关机&#xff0c;时间间隔忽长忽短&#xff0c;没有规律&#xff0c;解决办法就是重启…

翻硬币..

0翻硬币 - 蓝桥云课 (lanqiao.cn) 题目描述 小明正在玩一个"翻硬币”的游戏 桌上放着排成一排的若干硬币。我们用”表示正面&#xff0c;用o表示反面(是小写字母&#xff0c;不是零) 比如&#xff0c;可能情形是:**oo***o00 如果同时翻转左边的两个硬币&#xff0c;则变为…

考研C语言复习初阶(5)

目录 一.表达式求值 1.1隐式类型转换 1.2 算术转换 12.3 操作符的属性 二. 指针是什么&#xff1f; 三 指针和指针类型 3.1 指针-整数 3.2 指针的解引用 3.3 野指针 四.指针运算 4.1 指针-整数 4.2 指针-指针 4.3 指针的关系运算 5. 指针和数组 6. 二级指针 …

matlab中设置坐标轴范围和刻度 xlim/xtick/xticklable

set(gca,XLim,[0 10]);%X轴的数据显示范围 set(gca,XTick,[0:1:10]);%设置要显示坐标刻度 set(gca,XTickLabel,[0:1:10]);%给坐标加标签 y轴同理

202012青少年软件编程(图形化) 等级考试试卷(一级)

青少年软件编程(图形化) 等级考试试卷(一级)2020年12月 第1题:【 单选题】 下面哪个区域是“舞台区” ?( ) A:A B:B C:C D:D 【正确答案】: B 【试题解析】 : 第2题:【 单选题】 下图为小猫的初始方向, 哪个积木可以让小猫面向正右方?( ) A: B: C:…

2024.3.11 训练记录(13)

继续补题 文章目录 ICPC 2018青岛I Soldier GameICPC 2018青岛K Airdrop ICPC 2018青岛I Soldier Game 题目链接 线段树 果然稍微复杂一点的线段树就很难实现啊&#xff0c;不看题解根本没反应过来是线段树 struct Node {int l, r, lb, rb, nb, b; } tr[N * 4];其中&#x…

一个Promise全新API

1. 资讯速览 最近&#xff0c;Promise 新出了一个方法&#xff0c;已经进入 Stage 3 &#xff08;候选阶段&#xff09; &#xff0c;相信很快就能达到 Stage 4 &#xff08;完成阶段&#xff09;&#xff0c;并在项目中广泛使用。 这个方法就是 Promise.withResolvers。它是…