VUE3语法--toRefs与toRef用法

1、功能概述

ref和reactive能够定义响应式的数据,当我们通过reactive定义了一个对象或者数组数据的时候,如果我们只希望这个对象或者数组中指定的数据响应,其他的不响应。这个时候我们就可以使用toRefs和toRef实现局部数据的响应。

toRefs是toRef的升级版本

如果不会使用ref和reactive数据响应,参照如下博客:

https://blog.csdn.net/tangshiyilang/article/details/134701103

两者的不同点在于:toRefs取的字段如果不存在,不会给默认值,而toRef取的字段如果不存在会给默认值。

两者的相同点子在于:当头toRefs和toRef值发生变化的时候,reactive中的值不会同步。

2、toRefs用法

说明1const{name}=toRefs(testData);

toRefs如果从testData中取name,如果name不存在,不会给默认值。

通过toRefs导出的值,可以直接使用原名称获取如:{{name}}

说明2下面的案例中从testData中取了两个值作为响应式数据,name和name1,其中name1是不存在,在页面中不做任何的显示。

说明3通过toRefs取出的值name如果发生了变化,testData中的name不发生变化。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3"></script>
</head>
<body><div id="app">{{name}}--{{name1}}</div><script type="module">const app=Vue.createApp({//创建setupsetup(props,context){const {reactive,toRefs}=Vue;//从vue中引入toRefs和reactive//创建reactive设置响应式数据let testData=reactive({name:'小春',sex:"男"});//从testData中取出name的值响应,sex不参与响应const{name,name1}=toRefs(testData);return {name,name1}}});//vue实例只作用于app这个DOM节点中const vm=app.mount('#app');//viewModel是组件帮助我们完成的</script>
</body>
</html>

输出结果:

3、toRef的用法

说明1toRef从reactive中引出单条数据

说明2通过toRef取出的值name如果发生了变化,testData中的name不发生变化。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3"></script>
</head>
<body><div id="app">{{name}}</div><script type="module">const app=Vue.createApp({//创建setupsetup(props,context){const {reactive,toRef}=Vue;//从vue中引入toRef和reactive//创建reactive设置响应式数据let testData=reactive({name:'小春',sex:"男"});//从testData中取出name的值响应,sex不参与响应const name=toRef(testData,'name');return {name}}});//vue实例只作用于app这个DOM节点中const vm=app.mount('#app');//viewModel是组件帮助我们完成的</script>
</body>
</html>

输出结果:

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

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

相关文章

CentOS7 安装包 MariaDB 10.4.x

CentOS7 安装包 MariaDB 10.4.x 统一 MariaDB安装包 https://www.alipan.com/s/fvLg3gN7LPX 提取码: nh81 打开「阿里云盘」

React中父子之间数据的通信方式

上篇父子之间通信讲的是父子之间方法的通信&#xff0c;今天讲的是父子之间数据共享&#xff0c;因为是自己遇到什么就来总结什么了&#xff0c;所以没有一下更新完。 Father.tsx import React, { useEffect, useState, useRef } from react; import Child from ./component/c…

关于Anaconda的安装和环境部署(此章专为新手制定)

目录 Anaconda简介 一、软件下载&#xff08;地址&#x1f447;&#xff09; 2&#xff1a;点击下载 3&#xff1a;版本选择&#xff1a; 4&#xff1a;Anaconda的安装包就下载完成了 2&#xff1a;恭喜你&#xff0c;看到这里已经完成安装了 三、部署环境 1&#xff1…

【开题报告】基于SpringBoot的小饭桌管理系统的设计与实现

1.选题背景 &#xff08;1&#xff09;技术需求&#xff1a;随着互联网和移动互联网的快速发展&#xff0c;餐饮行业也面临着数字化、信息化的挑战和机遇。许多餐厅或饭店管理仍然采用传统的方式&#xff0c;存在着排队等候时间长、座位安排不合理等问题。因此&#xff0c;设计…

什么是 AWS IAM?如何使用 IAM 数据库身份验证连接到 Amazon RDS(上)

驾驭云服务的安全环境可能很复杂&#xff0c;但 AWS IAM 为安全访问管理提供了强大的框架。在本文中&#xff0c;我们将探讨什么是 AWS Identity and Access Management (IAM) 以及它如何增强安全性。我们还将提供有关使用 IAM 连接到 Amazon Relational Database Service (RDS…

ubuntu 20.04 server 安装 zabbix

ubuntu 20.04 server 安装 zabbix 参考文档 https://www.yuque.com/fenghuo-tbnd9/ffmkvs?# zabbix没用过&#xff0c;用过prometheus&#xff0c; 因为现在很多应用都支持直接接入prometheus监控&#xff0c; 而且大部分语言都都有sdk支持&#xff0c; 可以直接接入自己的…

Python卡尔曼滤波器OpenCV跟踪和预测物体的轨迹

模拟简单物体二维运动和预测位置 预测数学式 想象一下你正坐在一辆汽车里&#xff0c;在雾中行驶。 你几乎看不到路&#xff0c;但你有一个 GPS 系统可以告诉你你的速度和位置。 问题是&#xff0c;这个 GPS 并不完美&#xff1b; 它有时会产生噪音或不准确的读数。 您如何知…

lightdb 23.4 支持pivot行转列

前言 Lightdb-x支持行转列、列转行功能&#xff1a; pivot支持的语法如下&#xff1a; pivot支持项测试 pivot测试 create table hs_pivot(name varchar(40),course varchar(100),score int); insert into hs_pivot values(‘zhangsan’,‘chinese’,90); insert into h…

香港高才通计划申请被拒了?很可能是因为这五个原因!

香港高才通计划申请被拒了&#xff1f;很可能是因为这五个原因&#xff01; 据统计&#xff0c;截止今年10月31日&#xff0c;香港各项输入人才计划共收到超过18万宗申请&#xff0c;超过11万宗已被批准&#xff0c;已有7万人到港。其中&#xff0c;高才通计划一共收到约55,000…

Java基础语法之访问修饰限定符

private 表示私有的&#xff0c;只能在同一个包中的同一个类使用 像这样就是在同一个包中的不同类用了private修饰的变量&#xff0c;这是非法的&#xff0c;那到底该如何给a赋值呢&#xff1f;可以在定义时就赋值&#xff0c;但这样的代码就没有可操作性&#xff0c;所以我们…

2023年12月12日作业

头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent> #include <QTimer> #include <QTime> #include <QTextToSpeech>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : pub…

深入浅出接口测试原理及步骤

那么接口是什么&#xff1f; 软件开发&#xff0c;既要做前端&#xff0c;也要做后端&#xff0c;并且后端是整个业务的核心&#xff0c;用于处理业务请求&#xff0c;实现具体的功能&#xff1b;而前端只是提供一个页面给用户看结果以及提供页面给用户做输入。所以整个业务的…

章鱼网络进展月报 | 2023.11.1-11.30

章鱼网络大事摘要 1、2023年12月&#xff0c;Octopus 2.0 将会正式启动。 2、隐私协议 Secret Network 宣布使用 Octopus Network 构建的 NEAR-IBC 连接 NEAR 生态。 3、Louis 受邀作为嘉宾&#xff0c;在 NEARCON2023 的多链网络主题沙龙中发言&#xff1a;我们依然处于区…

【教学类-06-14】20231212 (4*13格版)X-Y之间“加法减法+-题”正方形纸手工纸打印

效果展示——15*15CM手工纸 背景需求&#xff1a; 大3班里做“加减法”题&#xff0c;要求是最少做一张习题纸&#xff08;数字火车、加减法、分合题&#xff09;&#xff0c;然后就选手工纸玩。 做完自选的X-Y加减法题目后&#xff0c;大三班一位男孩把纸给我看&#xff1a;…

二、SpringFramework 介绍

2.1 Spring 和 SpringFramework概念 https://spring.io/projects 广义的 Spring&#xff1a;Spring 技术栈&#xff08;全家桶&#xff09; 广义上的 Spring 泛指以 Spring Framework 为基础的 Spring 技术栈。 经过十多年的发展&#xff0c;Spring 已经不再是一个单纯的应…

产品经理必备-----Axure元件使用及案列

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《产品经理管理项目周期及【Axure RP9】简介&安装&基本使用》 ⛺️ 越努力 &#xff0c;越幸运 目录 一、Axure简介 二、Axure基本元件 2.1基本元件的使用 2.1.1 、形状元件 2.…

如何将Word中的表格图片转换为可编辑格式?

我们都知道&#xff0c;Word中的表格是一个非常有用的工具&#xff0c;可以让我们在文档中轻松添加和编辑各种数据。但有时候我们可能会遇到一个问题&#xff1a;当表格作为图片插入时&#xff0c;我们就不能直接编辑它了。这可怎么办呢&#xff1f; 别担心&#xff0c;我们有…

基于以太坊的智能合约开发Solidity(数组提升篇)

参考教程&#xff1a;【数据存储篇】1、string内存原理——特殊动态数组_哔哩哔哩_bilibili 1、语法——字符串&#xff1a; //声明版本号&#xff08;程序中的版本号要和编译器版本号一致&#xff09; pragma solidity ^0.5.17; //合约 contract DynamicString {string name…

【算法】递归、搜索与回溯算法

文章目录 一. 名词解释1. 递归1.1 什么是递归&#xff1f;1.2 为什么会用到递归&#xff1f;1.3 如何理解递归&#xff1f;1.4 如何写好一个递归&#xff1f; 2. 遍历和搜索3. 回溯和剪枝 二. 递归系列专题1. 汉诺塔问题2. 合并两个有序链表3. 反转链表4. 两两交换链表中的节点…

3DSEE:AI驱动的3D模型语义搜索引擎

3DSEE &#xff08;3D SEmantic Engine&#xff09;是基于 AI 技术的 3D 模型语义搜索引擎&#xff0c;可以自动提取 3D 模型内涵的语义信息并存储入库&#xff0c;以帮助用户使用自然语言或关键字高效地检索 3D 模型。3DSEE 提供完善的二次开发 API&#xff0c;无论使用Java、…