Vue3: toRefs与toRef的基本使用

news/2024/9/18 23:23:24/ 标签: 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/news/1426746.html

相关文章

【C++干货基地】面向对象核心概念 const成员函数 | 初始化列表 | explicit关键字 | 取地址重载

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 哈喽各位铁汁们好啊&#xff0c;我是博主鸽芷咕《C干货基地》是由我的襄阳家乡零食基地有感而发&#xff0c;不知道各位的…

如何利用ChatGPT进行论文撰写?

原文链接&#xff1a;如何利用ChatGPT进行论文撰写&#xff1f;https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247601619&idx1&snb686fbe87dedfac2df3a6afe780b2ffe&chksmfa820c34cdf5852251dca64597024ea62ddbde280086535ec251f4b62b848d9f9234688384…

《QT实用小工具·二十七》各种炫酷的样式表

1、概述 源码放在文章末尾 该项目实现了各种炫酷的样式表&#xff0c;如单选、多选、按钮、日历、表格、下拉框、滚轮等&#xff0c;下面是项目demo演示&#xff1a; 项目部分代码如下&#xff1a; #include "frmmain.h" #include "ui_frmmain.h" #inc…

【备忘录】openssl记录

openssl genrsa -out ca.key 2048 openssl req -x509 -new -nodes -key ca.key -days 10000 -out ca.crt -subj “/CCN/STBeijing/LBeijing/Okubernetes/OUKubernetes-manual/CNkubernetes-ca” openssl genrsa -out etcd-ca.key 2048 openssl req -x509 -new -nodes -key etc…

tensor是pytorch的核心,那torch.tensor和torch.Tensor区别是?

本文重点 从本节课程开始我们将正式开启pytorch的学习了&#xff0c;在深度学习框架中有一个重要的概念叫做张量&#xff0c;它是pytorch的基本操作单位&#xff0c;要想创建tensor有很多的方式&#xff0c;但是有两个torch.tensor和torch.Tensor容易混淆&#xff0c;本节课程…

Jmeter 性能-死锁问题定位+分析

1、环境搭建 ①准备脚本&#xff0c;执行压测 ②用Jstack 打印日志 jstack 112759 >dead.log ③下载日志到本地 sz dead.log 2、问题定位 ①打开dead.log&#xff0c;搜索deadlock ②查看死锁的线程 ③查看死锁位置 3、问题分析 ①下载死锁的类文件 Sz CaseControlle…

UE5下载与安装

官方网站&#xff1a;https://www.unrealengine.com/zh-CN 1、下载启动程序安装包。 登录官网后&#xff0c;点击首页右侧下载按钮下载Epic Games启动程序的安装包&#xff0c;如下图&#xff1a; 2、安装启动程序。 双击步骤1所下载安装软件&#xff0c;如下图&#xff1a;…

51.基于SpringBoot + Vue实现的前后端分离-校园志愿者管理系统(项目 + 论文)

项目介绍 本站是一个B/S模式系统&#xff0c;采用SpringBoot Vue框架&#xff0c;MYSQL数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SpringBoot Vue技术的校园志愿者管理系统设计与实现管理工…

RAG (Retrieval Augmented Generation) 结合 LlamaIndex、Elasticsearch 和 Mistral

作者&#xff1a;Srikanth Manvi 在这篇文章中&#xff0c;我们将讨论如何使用 RAG 技术&#xff08;检索增强生成&#xff09;和 Elasticsearch 作为向量数据库来实现问答体验。我们将使用 LlamaIndex 和本地运行的 Mistral LLM。 在开始之前&#xff0c;我们将先了解一些术…

【C++】-List经典面试笔试题总结-删除-插入-情况-合并-排序等经典操作

在C中&#xff0c;list 容器是标准模板库&#xff08;STL&#xff09;中的一种双向链表容器。以下是一些关于 list 的经典笔试面试题及解答&#xff1a; 1. list 容器的主要特点是什么&#xff1f; 解答&#xff1a; list 容器的主要特点包括&#xff1a; 它是一个双向链表结…

MySQL面试题 3

问题1&#xff1a;char、varchar的区别是什么&#xff1f; varchar是变长而char的长度是固定的。如果你的内容是固定大小的&#xff0c;你会得到更好的性能。 问题2: TRUNCATE和DELETE的区别是什么&#xff1f; DELETE命令从一个表中删除某一行&#xff0c;或多行&#xff0…

设计模式之观察者模式(下)

3&#xff09;JDK对观察者模式的支持 1.概述 在JDK的java.util包中&#xff0c;提供了Observable类以及Observer接口&#xff0c;它们构成了JDK对观察者模式的支持。 2.Observer接口 在java.util.Observer接口中只声明一个方法&#xff0c;它充当抽象观察者。 void update…

【rust简单工具理解】

1.map方法 map这个闭包的本质就是映射 let numbers vec![1, 2, 3, 4, 5]; let numbers_f64: Vec<f64> numbers.into_iter().map(|&x| x as f64).collect(); println!("{:?}", numbers_f64); // 输出: [1.0, 2.0, 3.0, 4.0, 5.0]2.and_then and_then …

HttpServletResponse HttpServletRequest

HttpServletResponse 和 HttpServletRequest 是 Java Servlet API 中的两个核心接口&#xff0c;它们分别代表了 HTTP 响应和 HTTP 请求。在基于 Java 的 Web 应用中&#xff0c;特别是使用 Servlet 技术时&#xff0c;这两个接口被广泛应用。 HttpServletRequest HttpServle…

单机调度问题(第i工件的完工时间=加工时间+等待时间)

第08章 制造系统的调度控制 - 百度文库 (baidu.com) 模拟退火单机极小化总流水时间的排序问题_哔哩哔哩_bilibili 在单机调度问题中&#xff0c;工件的完工时间是一个至关重要的指标&#xff0c;因为它直接反映了生产效率的高低。而完工时间的计算&#xff0c;必须同时考虑工件…

每日三个JAVA经典面试题(三十六)

1.垃圾回收器如何工作&#xff1f;它是如何影响应用性能的&#xff1f; 垃圾回收器&#xff08;Garbage Collector&#xff0c;GC&#xff09;是Java虚拟机&#xff08;JVM&#xff09;中的一部分&#xff0c;负责自动管理堆内存中的对象生命周期&#xff0c;回收不再被引用的…

【QT进阶】Qt http编程之http与https简单介绍

往期回顾 【QT进阶】Qt Web混合编程之html、 js的简单交互-CSDN博客 【QT进阶】Qt Web混合编程之使用ECharts显示各类折线图等-CSDN博客【QT进阶】Qt Web混合编程之实现ECharts数据交互动态修改-CSDN博客 【QT进阶】Qt http编程之http与https简单介绍 一、什么是http与https …

Mac idea启动vue项目的时候报Permission denied

问题 node_modules/.bin/vue-cli-service: Permission denied 原因, 权限不足. 解决方案 chmod 777 node_modules/.bin/vue-cli-service 这里的chmod 777 是给启动服务提高权限。 注意赋权路径一定要相同 最后再重新启动命令即可

客户端动态降级系统

本文字数&#xff1a;4576字 预计阅读时间&#xff1a;20分钟 01 背景 无论是iOS还是Android系统的设备&#xff0c;在线上运行时受硬件、网络环境、代码质量等多方面因素影响&#xff0c;可能会导致性能问题&#xff0c;这一类问题有些在开发阶段是发现不了的。如何在线上始终…

怎样实现opc采集数据后传给web后端

现在很多老工厂要进行数字化改造&#xff0c;现场生产的各种数据需要传到web后端&#xff0c;很多工厂现场原有的自动监控系统已经采集了现场的各种数据&#xff0c;只是没有形成联网。如果前端自动化系统全部废除&#xff0c;重新做数字化控制系统&#xff0c;成本投入太大&am…