Vue3: toRefs与toRef的基本使用

devtools/2024/9/18 23:14:23/ 标签: vue3, toRefs, toRef

一、前言

本文主要介绍toRefs>toRefs与toRef的基本使用。

二、内容

1、基本概念
toRefs>toRefs_11">2、toRefs>toRefs

如果把reactive定义的数据直接解构出来,解构出来的数据并不是响应式的。举例:

  • reactive定义的数据:
// 数据
let info = reactive({age: 20,height: 165,
});
  • 直接解构出来:
let { age, height } = info;
console.log(age);
console.log(height);
  • 结果如下:
    在这里插入图片描述

  • 使用toRefs>toRefs将解构出来的值转换成响应式数据:

import { reactive, toRefs>toRefs } from "vue";
let { age, height } = toRefs>toRefs(info);
console.log(age);
console.log(height);
  • 解构出来的数据已经变成响应式数据,这样当数据发生改变后,可以在页面上发生变化:

在这里插入图片描述

toRef_46">3、toRef

toRef一次只能将响应式数据里面的一对key-value转换成ref的格式

<script setup>
import { reactive, toRefs>toRefs,toRef } from "vue";// 数据
let info = reactive({age: 20,height: 165,
});let age=toRef(info,"age")
console.log(age);
console.log(age.value);
</script>

结果如下:
在这里插入图片描述


http://www.ppmy.cn/devtools/4570.html

相关文章

产品推荐 | 基于Lattice用于原型和FPGA设计和开发的Avant-E 评估板

01 产品概述 莱迪思半导体Avant-E评估板使设计人员能够快速进行原型设计和FPGA设计测试。它提供对所有 I/O 的访问&#xff0c;以及广泛的内存选项&#xff0c;以实现更快的原型设计和开发。 Avant-E评估板采用LFG1156封装的Avant-E FPGA。该板可以通过 FMC HPC、PMAD 和 Ras…

Python机器学习项目开发实战:可视化数据

注意&#xff1a;本文的下载教程&#xff0c;与以下文章的思路有相同点&#xff0c;也有不同点&#xff0c;最终目标只是让读者从多维度去熟练掌握本知识点。 下载教程&#xff1a;Python机器学习项目开发实战_可视化数据_编程案例解析实例详解课程教程.pdf 在Python机器学习项…

爬虫 //获取元素中的数据

// <!--jsoup解析工具所需依赖--> // <dependency> // <groupId>org.jsoup</groupId> // <artifactId>jsoup</artifactId> // <version>1.10.3</version> // </depende…

通过PyCharm平台开发Django应用程序

学会使用命令行工具开发Django应用程序是基础&#xff0c;不过更多的时候还是要借助平台开发工具。目前&#xff0c;最好的Django应用程序开发工具就是jetBrains公司推出的PyCharm平台了。 借助PyCharm开发平台&#xff0c;可以极大提高开发Django应用程序的效率&#xff0c;同…

【即插即用】空间注意力机制(附源码)

简单讲解&#xff1a; 一个简单的空间注意力机制模块的实现通常包含一个基于平均池化和最大池化的特征提取过程&#xff0c;然后通过卷积操作和 Sigmoid 激活函数生成注意力权重。 空间注意力机制的作用和优势&#xff1a; 特征增强&#xff1a;在这段代码中&#xff0c;通过…

在IntelliJIDEA中如何将依赖包打入项目中?

在IntelliJIDEA中将依赖包打入项目主要有以下几种场景和步骤&#xff1a; 一. 对于 Maven 项目&#xff1a; 在 pom.xml 文件中正确声明所需的依赖。IDEA 会自动从 Maven 仓库下载这些依赖。 构建项目时&#xff0c;默认情况下 Maven 不会将依赖包直接打进 JAR/WAR 文件中&am…

DHCP是什么意思 路由器中DHCP服务器怎么设置?

概述 DHCP是什么意思&#xff1f;很多朋友在路由器设置中&#xff0c;都会看到有一项“DHCP服务器”设置功能&#xff0c;而很多朋友对这个功能不太了解&#xff0c;也不知道怎么设置。其实&#xff0c;对于普通用户来说&#xff0c;无需去单独设置路由器DHCP服务器功能&#…

【软考】设计模式之命令模式

目录 1. 说明2. 应用场景3. 结构图4. 构成5. 优缺点5.1 优点5.2 缺点 6. 适用性7.java示例 1. 说明 1.命令模式&#xff08;Command Pattern&#xff09;是一种数据驱动的设计模式。2.属于行为型模式。3.请求以命令的形式被封装在对象中&#xff0c;并传递给调用对象。4.调用对…

docker部署java项目,如何docker-compose内的jdk版本与本地版本保持一致

目录结构 /var └── data├── docker-compose.yml └── docker├── Dockerfile└── jdk-8u401-linux-x64.tar.gzdockerfile文件 FROM ubuntu:latest# 拷贝本地服务器上的 JDK 安装包到 Docker 镜像中 COPY jdk-8u401-linux-x64.tar.gz /jdk-8u401-linux-x64.tar.g…

介绍TCP窗口

在TCP通信中&#xff0c;TCP窗口是用于控制发送方发送数据的速率的机制之一。TCP窗口大小会根据网络情况和接收方的处理能力进行动态调整&#xff0c;以最大化网络吞吐量并减少拥塞和丢包的风险。 当发送方以较快速度发送TCP数据包时&#xff0c;TCP窗口大小可能会自动调整&am…

8. Spring Boot 配置文件

源码地址&#xff1a;SpringBoot_demo 本篇文章内容源码位于上述地址的com/chenshu/springboot_demo/config包下 1. 配置文件是什么 上节说到&#xff0c;Spring Boot的项目分为三个部分&#xff1a;源代码目录、资源目录、单元测试目录。 而配置文件的位置就位于资源目录res…

【javaWeb 第七篇】后端-Spring

Spring SpringspringBoot请求简单参数实体参数数组集合参数日期参数JSON参数路径参数 响应数据分层解耦三层架构解耦操作Bean的声明Bean组件扫描问题DI详解 Spring 详细介绍结合官网查看&#xff1a;https://spring.io/why-spring Spring发展到今天已经形成一种开发生态圈&…

C语言C/S架构PACS影像归档和通信系统源码 医院PACS系统源码

C语言C/&#xff33;架构PACS影像归档和通信系统源码 医院PACS系统源码 医院影像科PACS系统&#xff0c;意为影像归档和通信系统。它是应用在医院影像科室的系统&#xff0c;主要的任务是把日常产生的各种医学影像&#xff08;包括核磁、CT、超声、各种X光机、各种红外仪、显微…

【游戏专区】贪吃蛇

1&#xff0c;游戏背景 贪吃蛇&#xff08;Snake&#xff09;是一款经典的电子游戏&#xff0c;最初在1976年由 Gremlin 公司开发。它的游戏背景相对简单&#xff0c;但具有高度的成瘾性。 1. **游戏场景**&#xff1a;通常在一个有界的矩形区域内进行&#xff0c;可以是一个…

无风扇嵌入式车载电脑在矿山车辆行业应用

矿山车辆行业应用 背景介绍 现代的采矿业面临许多的挑战&#xff0c;其中最重要的就是安全性的问题&#xff0c;无论在矿井下或地面上的工作&#xff0c;都必须确保员工的安全保障。因此&#xff0c;先进的矿车必须整合专用的车载电脑&#xff0c;在极其恶劣的采矿环境中稳定运…

upload-labs第十七十八关

第十七关 $is_upload false; $msg null;if(isset($_POST[submit])){$ext_arr array(jpg,png,gif);$file_name $_FILES[upload_file][name];$temp_file $_FILES[upload_file][tmp_name];$file_ext substr($file_name,strrpos($file_name,".")1);$upload_file …

IP地址和物理地址的理解

1. 引言 最近在学习计算机网络相关知识&#xff0c;很长时间都有个困惑&#xff0c;为什么TCP/IP协议栈中会有2中地址&#xff0c;即&#xff1a;IP地址和物理地址&#xff08;MAC地址&#xff09;为什么同时被使用&#xff1f;它们各自的作用是啥&#xff1f; 2.我的理解 在写…

[svelte]属性和逻辑块

属性 / Default values • Svelte 教程 | Svelte 中文网 属性 Declaring props 到目前为止&#xff0c;我们只处理了内部状态——也就是说&#xff0c;这些值只能在给定的组件中访问。 在任何实际应用程序中&#xff0c;都需要将数据从一个组件向下传递到其子组件。为此&…

Go语言常见错误 | 工程组织不合理 (工程结构和包的组织)

编写程序的过程中,组织代码的方式,不仅影响到代码的质量,也决定了团队的协作效率。在使用Golang进行项目开发时,工程组织不合理(包括工程结构和包的组织)是个常见的问题。下文将详述这个问题,并提供改善的方案。 工程结构不合理 Golang项目的工程结构对于代码的模块性…

【错题集-编程题】腐烂的苹果(多源 BFS + 最短路)

题目链接&#xff1a;腐烂的苹果_牛客题霸_牛客网 (nowcoder.com) 一、分析题目 多源 BFS 问题&#xff0c;加一点最短路的思想&#xff0c;固定套路。 二、代码 //看了题解之后AC的代码 class Solution { private:int n, m;bool vis[1010][1010];int dx[4]{-1,0,1,0}, dy[4]{…