Vue3 toRef函数和toRefs函数

当我们在setup 中的以读取对象属性单独交出去时,我们会发现这样会丢失响应式:

setup() {let person = reactive({name: "张三",age: 18,job: {type: "前端",salary:10}})return {name: person.name,age: person.age,type: person.job.type,salary:person.job.salary}
},

为什么呢?

因为我们返回的数据有问题,例如我们返回了 name: person.name,我们其实返回的并不是person的name 属性,而是返回的这个属性的属性值。也就是说,你返回的是 name: "张三"。

他并不是一个ref 对象,所以无法拥有响应式。

一、toRef函数

既然我们交出去的自定义数据不是ref 对象,那么我们就可以使用toRef 使这个对象中的属性值变为一个ref 对象。

使用toRef 函数之前需要先对其进行引入:

import { toRef } from "vue";

语法格式如下: 

const xxx = toRef ( 对象, "属性" );

 因此,我们上面的代码使用如下的写法才能为响应式:

setup() {let person = reactive({name: "张三",age: 18,job: {type: "前端",salary:10}})return {name: toRef(person, "name"),age: toRef(person, "age"),type: toRef(person.job, "type"),salary: toRef(person.job, "salary")}
},

二、toRefs函数

当我们想把一个对象中的所有属性都单独暴露出去,或者是将对象中的大多数属性都暴露出去,可以使用toRefs 函数。

使用toRefs 函数之前需要先对其进行引入:

import { toRefs } from "vue";

语法格式如下:

const xxx = toRefs (对象) 

我们得到的是一个对象,对象中的每一个属性都是一个ref 对象 。

 

 因此,我们在return 数据的时候可以直接使用解构赋值来方便数据的导出:

setup() {let person = reactive({name: "张三",age: 18,job: {type: "前端",salary:10}})return {...toRefs(person)}
},

不过我们在模板中的是写只是少了一层person ,perosn 中的对象仍然要使用读取属性的方式去进行读取:

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

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

相关文章

2023最新最全【CUDA Toolkit 12.3】下载安装零基础教程【附安装包】

官网地址:这里 CUDA是英伟达公司开发的一种并行计算平台和编程模型。它利用GPU的强大计算能力,加速各种数学和科学计算、数据分析、机器学习、计算机视觉等任务。CUDA包括CUDA编程语言、CUDA运行时库、NVIDIA显卡等组件。 CUDA的编写方式分为两种&…

Python aiohttp 完全指南:快速入门

aiohttp 就是 Python 中一款优秀的异步 Web 框架,它能够帮助我们构建高效的异步 Web 应用和异步 HTTP 客户端。在本文中,我们将深入探讨 aiohttp 是什么以及如何使用它,通过简单易懂的案例带领你理解异步编程,以及如何处理异步请求…

OpenGL 的学习之路-4(变换)

三大变换:平移、缩放、旋转(通过这三种变换,可以将图像移动到任意位置) 其实,这背后对应的数学在 闫令琪 图形学课程 中有过一些了解,所以,理解起来也不觉得很困难。看程序吧。 1.画三角形&am…

FISCO BCOS 3.0【02】配置和使用系统自带的控制台

官方技术文档:https://fisco-bcos-doc.readthedocs.io/zh-cn/latest/index.html 我们在官方技术文档的基础上,进行,对文档中一些不清楚的地方进行修正 控制台提供了向FISCO BCOS节点部署合约、发起合约调用、查询链状态等功能。 第一步. 安…

Spring对事务的实现

Spring对事务的支持 事务概述事务的四个处理过程事务的四个特性 引入事务场景Spring实现事务的两种方式声明式事务之注解实现方式 事务概述 在一个业务流程当中,通常需要多条DML(insert delete update)语句共同联合才能完成,这多…

YOLOv8-Seg改进:渐近特征金字塔网络(AFPN)

🚀🚀🚀本文改进:AFPN通过融合两个相邻的Low-Level特征来启动的,并渐进地将High-Level特征纳入融合过程,提升分割能力。 🚀🚀🚀AFPN小目标分割首选,暴力涨点 🚀🚀🚀YOLOv8-seg创新专栏:http://t.csdnimg.cn/KLSdv 学姐带你学习YOLOv8,从入门到创新,轻…

口袋参谋:一键下载任意买家秀图片、视频,是怎么做到的!

​对于淘宝商家来说,淘宝买家秀是非常的重要的。买家秀特别好看的话,对于提升商品的销量来说,会有一定的帮助,如何下载别人的买家秀图片,然后用到自己的店铺中呢? 这里我可以教叫你们一个办法!那…

C语言之for while语句详解

C语言之for while语句详解 文章目录 C语言之for while语句详解简介1 while语句1.1while语句的格式1.2 while语句的实践 2 for2.1 for语句格式2.2 for循环的实践 3 do while3.1 do while语句格式3.2 do while循环的实践 3 循环中break和continue3.1 while语句中的break和continu…

DGL如何表征一张图

有关于DGL中图的构建 DGL 将有向图表示为一个 DGL 图对象。图中的节点编号连续,从0开始。我们一般通过指定图中的节点数,以及源节点和目标节点的列表,来构建这么一个图。 下面的代码构造了一个图,这个图有五个叶子节点。中心节点…

java并发编程JUC:一、专栏配置+进程与线程+并行和并发+同步和异步+线程的创建、调用、查看、运行原理和相关API

专栏配置 pom.xml <properties><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target> </properties> <dependencies><dependency><groupId>org.projectlombok<…

Python与ArcGIS系列(九)自定义python地理处理工具

目录 0 简述1 创建自定义地理处理工具2 创建python工具箱0 简述 在arcgis中可以进行自定义工具箱,将脚本嵌入到自定义的可交互窗口工具中。本篇将介绍如何利用arcpy实现创建自定义地理处理工具以及创建python工具箱。 1 创建自定义地理处理工具 在arctoolbox中的自定义工具箱…

Java的IO流-缓冲流

字节缓冲流 package com.itheima.d2;import java.io.*;public class Test1 {public static void main(String[] args) {try (InputStream is new FileInputStream("IO/src/itheima01.txt");//1、定义一个字节缓冲输入流包装原始的字节输入流InputStream bis new Bu…