Vue3: toRefs与toRef的基本使用

server/2024/9/18 23:09:47/ 标签: 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/server/4832.html

相关文章

文心一言api开发者文档,python版ERNIE-3.5-8K-Preview模型调用方法

ERNIE 3.5是百度自研的旗舰级大规模⼤语⾔模型&#xff0c;覆盖海量中英文语料&#xff0c;具有强大的通用能力&#xff0c;可满足绝大部分对话问答、创作生成、插件应用场景要求&#xff1b;支持自动对接百度搜索插件&#xff0c;保障问答信息时效。本文介绍了ERNIE-3.5-8K-Pr…

SQLite的PRAGMA 声明(二十三)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite从出生到现在&#xff08;发布历史记录&#xff09;&#xff08;二十二&#xff09; 下一篇&#xff1a;用于 SQLite 的异步 I/O 模块&#xff08;二十四&#xff09; PRAGMA 语句是特定于 SQLite 的 SQL 扩…

Linux命令学习—文件服务器 NFS 和 Samba

1.1、NFS 服务器 1.1.1、NFS 服务器介绍 NFS network file system 网络文件服务器 最初由 SUN 公司发展起来&#xff0c;一种简单的文件服务器&#xff0c;NFS 允许一个系统在网络上与他人共享目录和文 件。 1.1.2、配置 NFS 服务器 ①、NFS 的配置相关文件 /etc/exports …

计算机科学与导论 第十六章 安全

文章预览&#xff1a; 16.1引言16.1.1 安全目标16.1.2 攻击 16.2机密性16.2.1 对称密钥密码术16.2.2 非对称密钥密码术 16.1引言 为了安全&#xff0c;信息需要避开未授权的使用(机密性),保护信息不受到未授权的篡改(完整性)&#xff0c;并且对于得到授权的实体来说是需要时可…

Grok-1.5 Vision:X AI发布突破性的多模态AI模型,超越GPT 4V

在人工智能领域&#xff0c;多模态模型的发展一直是科技巨头们竞争的焦点。 近日&#xff0c;马斯克旗下的X AI公司发布了其最新的多模态模型——Grok-1.5 Vision&#xff08;简称Grok-1.5V&#xff09;&#xff0c;这一模型在处理文本和视觉信息方面展现出了卓越的能力&#x…

【C语言回顾】数组

前言1. 数组2. 一维数组2.1 一维数组的创建2.2 一维数组的初始化2.3 一维数组的使用2.3.1 一维数组的下标2.3.2 一维数组的输入和输出 2.4 一维数组在内存中的存储 3. 二维数组3.1 二维数组的创建3.2 二维数组的初始化3.3 二维数组的使用3.3.1 二维数组的下标3.3.2 二维数组的输…

LM Studio:一个桌面应用程序,旨在本地计算机上运行大型语言模型(LLM),它允许用户发现、下载并运行本地LLMs

LM Studio是一个桌面应用程序,旨在本地计算机上运行大型语言模型(LLM)。它允许用户发现、下载并运行本地LLMs,支持在Windows、Linux和Mac等PC端部署2510。LM Studio的安装过程涉及访问其官网并选择相应操作系统的版本进行下载安装。安装成功后,用户可以通过该软件选择并运…

C#自定义窗体更换皮肤的方法:创建特殊窗体

目录 1.窗体更换皮肤 2.实例 &#xff08;1&#xff09;图片资源管理器Resources.Designer.cs设计 &#xff08;2&#xff09;Form1.Designer.cs设计 &#xff08;3&#xff09;Form1.cs设计 &#xff08;4&#xff09; 生成效果 &#xff08;5&#xff09;一个遗憾 1.窗…

Linux的firewalld防火墙

介绍firewalld&#xff1a; ①、firewalld&#xff08;Dynamic Firewall Manager of Linux systems&#xff0c;Linux系统的动态防火墙管理器&#xff09;服务是默认的防火墙配置管理工具&#xff0c;它拥有基于CLI&#xff08;命令行界面&#xff09;和基于GUI&#xff08;图…

如何保障UDP传输中数据文件不丢失?

UDP协议因其低时延和高速传输的特性&#xff0c;在实时应用和大量数据传输领域中发挥着不可或缺的作用。但是&#xff0c;由于UDP是一种无连接的通讯协议&#xff0c;它并不确保数据包的顺序、完整性和可靠性。 为了解决UDP传输中数据一致性的问题&#xff0c;技术专家们进行了…

【leetcode面试经典150题】54. 最小栈(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…

Linux硬件管理

文章目录 Linux硬件管理1.查看磁盘空间 df -h2.查看文件的磁盘占用空间 du -ah3.查看系统内存占用情况 htop Linux硬件管理 1.查看磁盘空间 df -h 语法 df [选项][参数]选项 -a或–all&#xff1a;包含全部的文件系统&#xff1b; –block-size<区块大小>&#xff1a;…

大数据之 Hive 快速搭建的详细步骤

Hive hive 搭建三种模式: 内嵌模式本地模式远程模式内嵌模式 Hadoop 和 Hive 整合 修改 hadoop/etc/下的 core-site.xml: <property><name>hadoop.proxyuser.root.hosts</name><value>*</value> </property> <property><nam…

OSI网络七层协议 ——(随手笔记)

1.OSI OSI&#xff08;Open System Interconnect&#xff09;&#xff0c;即开放式系统互连。 一般都叫OSI参考模型&#xff0c;是ISO组织在1985年研究的网络互连模型。该体系结构标准定义了网络互连的七层框架&#xff08;物理层、数据链路层、网络层、传输层、会话层、表示层…

SSRF+Redis未授权getshell

SSRFRedis未授权getshell 1.前言 当一个网站具有ssrf漏洞&#xff0c;如果没有一些过滤措施&#xff0c;比如没过滤file协议&#xff0c;gophere协议&#xff0c;dict等协议&#xff0c;就会导致无法访问的内网服务器信息泄露&#xff0c;甚至可以让攻击者拿下内网服务器权限 …

计算机网络——ARP协议

目录 前言 前篇 引言 什么是ARP协议。 ARP帧结构 ARP帧结构的字段说明 ARP协议的工作流程 IP地址变更操作 什么是ARP攻击&#xff1f; 前言 本博客是博主用于复习计算机网络的博客&#xff0c;如果疏忽出现错误&#xff0c;还望各位指正。 这篇博客是在B站掌芝士zzs…

Python的pytest框架(2)--断言机制

接上篇文章&#xff0c;我们使用pytest框架&#xff0c;实现自动发现并执行用例&#xff0c;接着利用断言语句判断测试结果&#xff0c;最后生成报告。这篇文章我们就断言机制来展开&#xff0c;深入学习进阶pytest框架的断言机制&#xff1a; 目录 一、基本断言 使用Python…

Linux环境下安装selenium 和 chromedriver

安装selenium模块 pip3 install selenium安装谷歌浏览器 yum install https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm -y安装chromedriver 1&#xff09;运行下面命令查看浏览器版本 google-chrome --version # Google Chrome 123.0.6312.12…

GLSL中的std140注意事项

一、关于bool的注意事项 以下是笔者在学习OpenGL相关内容时遇到的问题 struct UniformBufferObject {alignas(16) igm::vec3 viewPos;alignas(4) bool useColor; };这是我在C程序中声明的一个UBO&#xff0c;对应于着色器中的&#xff1a; layout(std140, binding 1) unifo…

1.0 Hadoop 教程

1.0 Hadoop 教程 分类 Hadoop 教程 Hadoop 是一个开源的分布式计算和存储框架&#xff0c;由 Apache 基金会开发和维护。 Hadoop 为庞大的计算机集群提供可靠的、可伸缩的应用层计算和存储支持&#xff0c;它允许使用简单的编程模型跨计算机群集分布式处理大型数据集&#xf…