Vue3快速上手(八) toRefs和toRef的用法

顾名思义,toRef 就是将其转换为ref的一种实现。详细请看:
一、toRef
1.1 示例
<script lang='ts' setup name="toRefsAndtoRef">
// 引入reactive,toRef
import { reactive, toRef } from 'vue'
// reactive包裹的数据即为响应式对象
let person = reactive({name: "李四",age: 99}
)
function updatePerson() {let name = toRef(person, 'name')console.log(name);console.log(name.value);console.log(person.name);// 实际修改数据name.value += '@'
}</script>
1.2 解释
toRef就相当于是将对象Person里的某个属性,如name,单独解构赋值给name,并使得name同为响应式对象。且修改name的值时,person.name的值随之变化。
如下图可以看到:
1、name是一个ObjectRefImpl对象的实例。
2、底层还是个Proxy(Object)
3、name的值和person.name的值是一起变化的。

1.3 页面效果

二、toRefs
理解了toRef之后,再理解toRefs就相当容易了。
无非是1和n的区别。
2.1 示例
<script lang='ts' setup name="toRefsAndtoRef">
// 引入reactive,toRefs
import { reactive, toRefs } from 'vue'
// reactive包裹的数据即为响应式对象
let person = reactive({name: "李四",age: 99}
)
function updatePerson() {let {name, age} = toRefs(person)console.log(name);console.log(name.value, age.value);// 修改数据name.value += '@'age.value += 1console.log('name: ',name.value);console.log('person.name: ', person.name);
}</script>
2.2 解释
toRefs就相当于是将对象Person里的所有属性,一起解构赋值给name,并使得name同为响应式对象。且修改name的值时,person.name的值随之变化。
如下图可以看到:
1、各个属性都是一个ObjectRefImpl对象的实例。
2、底层还是个Proxy(Object)
3、解构出的变量的值和对象里属性的值是一起变化的。

2.3 页面效果

END
相关文章:
Vue3快速上手(八) toRefs和toRef的用法
顾名思义,toRef 就是将其转换为ref的一种实现。详细请看: 一、toRef 1.1 示例 <script langts setup name"toRefsAndtoRef"> // 引入reactive,toRef import { reactive, toRef } from vue // reactive包裹的数据即为响应式对象 let p…...
《数学建模》专栏导读
文章分类 相关概念入门快速建模相关混合整数线性规划(MILP)加速技巧数值问题探讨相关问题解决技巧 相关概念入门 文章相关概念离散优化模型的松弛模型线性松弛问题混合整数线性规划MILP问题中增添约束的影响约束的影响 快速建模相关 文章求解器涉及步…...
App启动优化笔记 1
app大致的启动流程。有Launcher进程,system_server进程,zygote进程,APP进程。 Launcher进程:启动activity来启动应用 system_server进程:(ams是其中的一个binder):发送一个socket消息给Zygote。 zygote进程:收到消息后,fork新的进程,---》app进程启动 APP进程:…...
Spring Boot 笔记 027 添加文章分类
1.1.1 添加分类 <!-- 添加分类弹窗 --> <el-dialog v-model"dialogVisible" title"添加弹层" width"30%"><el-form :model"categoryModel" :rules"rules" label-width"100px" style"padding…...
【SQL】sql记录
1、start with star with 是一种用于层次结构查询的语法,它允许我们从指定的起始节点开始,递归查询与该节点相关联的所有子节点。 SELECT id, name, parent_id from test001 START WITH id 1 CONNECT BY PRIOR id parent_id 2、row_number() over pa…...
嵌入式培训机构四个月实训课程笔记(完整版)-Linux ARM驱动编程第六天-ARM Linux编程之SMP系统 (物联技术666)
链接:https://pan.baidu.com/s/1V0E9IHSoLbpiWJsncmFgdA?pwd1688 提取码:1688 SMP(Symmetric Multi-Processing),对称多处理结构的简称,是指在一个计算机上汇集了一组处理器(多CPU),各CPU之间共享内存子系…...
html5播放 m3u8
注意:m3u8地址要为网络地址,直接把代码复制为html直接在本地打开,可能不行,需要放在nginx或者apache或者其他的web服务器上运行。 <!DOCTYPE html> <html> <head><meta charsetutf-8 /><title>测试…...
微信小程序按需注入和用时注入
官网链接 按需注入 {"lazyCodeLoading": "requiredComponents" }注意事项 启用按需注入后,小程序仅注入当前访问页面所需的自定义组件和页面代码。未访问的页面、当前页面未声明的自定义组件不会被加载和初始化,对应代码文件将不…...
iPhone 16 组件泄露 揭示了新的相机设计
iPhone 16 的发布似乎已经等了很长一段时间,但下一个苹果旗舰系列可能会在短短 7 个月内与我们见面——而新的组件泄漏让我们对可能即将到来的重新设计有了一些了解。后置摄像头模块。 爆料者 Majin Bu(来自 MacRumors)获得的示意图显示&…...
网络工程师学习笔记——IPV6
20世纪80年代,IETF(Internet Engineering Task Force,因特网工程任务组)发布RFC791,即IPv4协议,标志IPv4正式标准化。在此后的几十年间,IPv4协议成为最主流的协议之一。无数人在IPv4的基础上开发…...
【零基础学习CAPL】——CAN报文的发送(LiveCounter——生命信号)
🙋♂️【零基础学习CAPL】系列💁♂️点击跳转 文章目录 1.概述2.面板创建3.系统变量创建4.CAPL实现5.效果5.1.0~15循环发送5.2.固定值发送6.全量脚本1.概述 本章主要介绍带有生命信号LiveCounter的报文发送脚本 一般报文可使用CANoe的IG模块直接发送,但存在循环冗余…...
git提交代码冲突
用idea2023中的git提交代码,出现 error: Your local changes to the following files would be overwritten by merge: ****/****/****/init.lua Please commit your changes or stash them before you merge. Aborting 出现这个错误可能是因为你的本地修改与远…...
树莓派:使用mdadm为重要数据做RAID 1保护
树莓派作为个人服务器可玩性还是有点的。说到服务器,在企业的生成环境中为了保护数据,基本上都会用到RAID技术。比如,服务器两块小容量但高性能的盘做个RAID-1按装操作系统,余下的大容量中性能磁盘做个RAID-5或者RAID-6存放数据。…...
HTML板块左右排列布局——左侧 DIV 固定宽度,右侧 DIV 自适应宽度,填充满剩余页面
我们可以借助CSS中的 float 属性来实现。 实例: 布局需求: 左侧 DIV 固定宽度,右侧 DIV 自适应宽度,填充满剩余页面。 <!DOCTYPE html> <html><head><meta charset"UTF-8"><meta http-e…...
红旗linux安装32bit依赖库
红旗linux安装32bit依赖库 红旗linux安装32bit依赖库 lib下载 红旗-7.3-lib-32.tar.gz 解压压缩包,根据如下进行操作 1.回退glibc(1)查看当前glibc版本[root192 ~]# rpm -qa | grep glibcglibc-common-2.17-157.axs7.1.x86_64glibc-headers-2.17-260.axs7.5.x86_…...
Stable Diffusion教程——使用TensorRT GPU加速提升Stable Diffusion出图速度
概述 Diffusion 模型在生成图像时最大的瓶颈是速度过慢的问题。为了解决这个问题,Stable Diffusion 采用了多种方式来加速图像生成,使得实时图像生成成为可能。最核心的加速是Stable Diffusion 使用了编码器将图像从原始的 3512512 大小转换为更小的 46…...
NFTScan | 02.12~02.18 NFT 市场热点汇总
欢迎来到由 NFT 基础设施 NFTScan 出品的 NFT 生态热点事件每周汇总。 周期:2024.02.12~ 2024.02.18 NFT Hot News 01/ CryptoPunks 推出「Punk in Residence」孵化器计划 2 月 12 日,NFT 项目 CryptoPunks 宣布推出「Punk in Residence」孵化器计划&a…...
使用 apt 源安装 ROCm 6.0.x 在Ubuntu 22.04.01
从源码编译 rocSolver 本人只操作过单个rocm版本的情景,20240218 ubuntu 22.04.01 1,卸载原先的rocm https://docs.amd.com/en/docs-5.1.3/deploy/linux/os-native/uninstall.html # Uninstall single-version ROCm packages sudo apt autoremove ro…...
python函数的定义和调用
1. 函数的基本概念 在编程中,函数就像是一台机器,接受一些输入(参数),进行一些操作,然后产生输出(结果)。这让我们的代码更加模块化和易于理解。 函数是一段封装了一系列语句的代码…...
【JVM篇】什么是类加载器,有哪些常见的类加载器
文章目录 🍔什么是类加载器🛸有哪些常见的类加载器 🍔什么是类加载器 负责在类加载过程中,将字节码信息以流的方式获取并加载到内存当中 🛸有哪些常见的类加载器 启动类加载器 启动类加载器是有Hotspot虚拟机通过的类…...
BilibiliDown完整指南:三步掌握B站视频批量下载技巧
BilibiliDown完整指南:三步掌握B站视频批量下载技巧 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors/bi/…...
拉丝机在紧固件生产中的作用与工艺流程_6月FES上海紧固件展
2026第十六届上海紧固件专业展将于6月24日至26日在国家会展中心(上海)举行。本届展会由上海上搜展览与华人螺丝网联合打造,并获得行业权威机构支持,整体展出规模约70,000平方米,预计汇聚1,400余家参展企业和25,000名专…...
MQTT.fx连接阿里云物联网平台全流程指南(含密码生成工具推荐)
MQTT.fx连接阿里云物联网平台全流程指南(含密码生成工具推荐) 物联网开发者在初次尝试将设备接入阿里云物联网平台时,往往会遇到各种连接问题。作为最受欢迎的MQTT客户端工具之一,MQTT.fx因其简洁直观的界面和强大的功能…...
从零开始学SCL:手把手教你实现天塔之光、数码管显示等工业控制案例(含避坑指南)
从零开始学SCL:手把手教你实现天塔之光、数码管显示等工业控制案例(含避坑指南) 工业自动化领域中,PLC编程是核心技能之一。而SCL(Structured Control Language)作为IEC 61131-3标准中的高级文本语言&#…...
AI头像生成器新手教程:5个常用风格关键词+3类背景模板Prompt速查表
AI头像生成器新手教程:5个常用风格关键词3类背景模板Prompt速查表 1. 快速了解AI头像生成器 AI头像生成器是一个帮你设计专属头像创意的智能工具。你只需要简单描述想要的头像风格,它就能生成详细的描述文案,这些文案可以直接用在Midjourne…...
Hotkey Detective:解决Windows热键冲突的创新方法
Hotkey Detective:解决Windows热键冲突的创新方法 【免费下载链接】hotkey-detective A small program for investigating stolen hotkeys under Windows 8 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 问题引入:当你的快捷键…...
用PyTorch和snnTorch库5分钟搞定一个脉冲神经网络(SNN)手写数字识别Demo
用PyTorch和snnTorch库5分钟搞定一个脉冲神经网络(SNN)手写数字识别Demo 脉冲神经网络(SNN)作为第三代神经网络模型,正逐渐从学术研究走向工业应用。与传统人工神经网络不同,SNN通过模拟生物神经元的脉冲发…...
比迪丽模型在数据库课程设计中的应用:ER图可视化增强
比迪丽模型在数据库课程设计中的应用:ER图可视化增强 1. 引言 数据库课程设计是计算机专业学生的必修实践环节,其中ER图(实体-关系图)的设计与呈现是核心难点。传统工具绘制的ER图往往显得枯燥抽象,学生难以直观理解…...
实时手机检测-通用部署指南:3步完成环境搭建与模型调用
实时手机检测-通用部署指南:3步完成环境搭建与模型调用 1. 环境准备与快速部署 1.1 系统要求 操作系统:Linux/Windows/macOS(推荐Ubuntu 20.04)Python版本:3.7-3.10GPU支持:NVIDIA显卡(可选&…...
实战指南:利用Python可视化常见激活函数(Sigmoid、Tanh、ReLU、PReLU)及其特性对比
1. 为什么需要可视化激活函数? 在深度学习的世界里,激活函数就像是神经网络的"开关",决定了神经元是否应该被激活。但很多初学者在学习时,往往只是死记硬背公式,却不知道这些函数长什么样、在什么情况下会有…...
