VUE语法--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/211781.shtml

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

相关文章

算一算并输出2到正整数n中每个数的质因子(for循环)

计算并输出2到正整数n之间每个数的质因子&#xff0c;并以乘法形式输出。 输入格式: 输入只有1个正整数即n。 输出格式: 把2到正整数n间的每一个数分解成它的质因子&#xff0c;并以乘法的形式输出。例如&#xff0c;输入的正整数n值为10&#xff0c;则应输出如下&#xff…

MIT线性代数笔记-第28讲-正定矩阵,最小值

目录 28.正定矩阵&#xff0c;最小值打赏 28.正定矩阵&#xff0c;最小值 首先正定矩阵是一个实对称矩阵 由第 26 26 26讲的末尾可知正定矩阵有以下四种判定条件&#xff1a; 所有特征值都为正左上角所有 k k k阶子矩阵行列式都为正&#xff08; 1 ≤ k ≤ n 1 \le k \le n …

DDD系列 - 第6讲 仓库Repository及Mybatis、JPA的取舍(一)

目录 一、领域层定义仓库接口1.1 设计聚合1.2 定义仓库Repository接口二 、基础设施层实现仓库接口2.1 设计数据库2.2 集成Mybatis2.3 引入Convetor2.4 实现仓库三、回顾一、领域层定义仓库接口 书接上回,之前通过一个关于拆解、微服务、面向对象的故事,向大家介绍了如何从微…

简单的WEB服务器

优质博文&#xff1a;IT-BLOG-CN 目的&#xff1a; 了解Java Web服务器是如何运行的。Web服务器使用HTTP与其客户端&#xff0c;也就是Web浏览器进行通信。基于Java的Web服务器会使用两个重要类&#xff1a;java.net.Socket类和java.net.ServerSocket类&#xff0c;并通过发送…

详解Keras3.0 Models API: Model class

1、语法 keras.Model() 将不同层组为具有训练/推理特征的对象的模型 2、示例一 inputs keras.Input(shape(37,)) x keras.layers.Dense(32, activation"relu")(inputs) outputs keras.layers.Dense(5, activation"softmax")(x) model keras.Model…

58.Nacos源码分析2

三、服务心跳。 3.服务心跳 Nacos的实例分为临时实例和永久实例两种&#xff0c;可以通过在yaml 文件配置&#xff1a; spring:application:name: order-servicecloud:nacos:discovery:ephemeral: false # 设置实例为永久实例。true&#xff1a;临时; false&#xff1a;永久ser…

MySQL-备份+日志:介质故障与数据库恢复

目录 第1关&#xff1a;备份与恢复 第2关&#xff1a;备份日志&#xff1a;介质故障的发生与数据库的恢复 第1关&#xff1a;备份与恢复 任务描述 本关任务: 备份数据库&#xff0c;然后再恢复它。 test1_1.sh # 你写的命令将在linux的命令行运行 # 对数据库residents作海…

【C/C++笔试练习】多态的概念、虚函数的概念、虚表地址、派生类的虚函数、虚函数的访问、指针引用、动态多态、完全数计算、扑克牌大小

文章目录 C/C笔试练习选择部分&#xff08;1&#xff09;多态的概念&#xff08;2&#xff09;虚函数的概念&#xff08;3&#xff09;虚表地址&#xff08;4&#xff09;派生类的虚函数&#xff08;5&#xff09;虚函数的访问&#xff08;6&#xff09;分析程序&#xff08;7&…

C# WPF上位机开发(会员管理软件)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 好多同学都认为上位机只是纯软件开发&#xff0c;不涉及到硬件设备&#xff0c;比如听听音乐、看看电影、写写小的应用等等。如果是消费电子&#…

HibernateJPA快速搭建

1. 先创建一个普通Maven工程&#xff0c;导入依赖 <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test</scope></dependency><depe…

Java 匿名内部类使用的外部变量,为什么一定要加 final?

问题描述 Effectively final Java 1.8 新特性&#xff0c;对于一个局部变量或方法参数&#xff0c;如果他的值在初始化后就从未更改&#xff0c;那么该变量就是 effectively final&#xff08;事实 final&#xff09;。 这种情况下&#xff0c;可以不用加 final 关键字修饰。 …

报错:Parsed mapper file: ‘file mapper.xml 导致无法启动

报错 &#xff1a; Logging initialized using class org.apache.ibatis.logging.stdout.StdOutImpl adapter. Registered plugin: com.github.yulichang.interceptor.MPJInterceptor3b2c8bda Parsed mapper file: file [/Mapper.xml] application无法启动 我这边产生原因是项…

K8S学习指南(4)-minikube的使用

文章目录 简介安装 Minikube启动 Minikube 集群基本概念创建和管理资源1. 创建 Pod2. 创建 Deployment3. 创建 Service 监视和调试1. 查看集群状态2. 查看集群信息3. 访问 Kubernetes Dashboard4. 使用 kubectl 命令 清理资源1. 删除 Pod2. 删除 Deployment3. 删除 Service4. 停…

! [remote rejected] master -> master (pre-receive hook declined)

! [remote rejected] master -> master (pre-receive hook declined) 如图&#xff1a; 出错解决方法 首先输入命令 git branch xindefenzhi然后&#xff0c;进入这个新创建的分支 git checkout branch然后重新git push就可以了

爬虫学习-基础库的使用(urllib库)

目录 一、urllib库介绍 二、request模块使用 &#xff08;1&#xff09;urlopen ①data参数 ②timeout参数 &#xff08;2&#xff09;request &#xff08;3&#xff09;高级用法 ①验证 ②代理 ③Cookie 三、处理异常 ①URLError ②HTTPError 四、解析链接 ①urlparse ②…

LeetCode-10. 正则表达式匹配

LeetCode-10. 正则表达式匹配 问题分析算法描述程序代码CGo 问题分析 这道题的难点主要在于*号的匹配&#xff0c;这里记dp[i][j]表示s[1...i]和p[1...j]能否完成匹配&#xff0c;先根据特殊情况归纳总结&#xff1a; *号匹配 0 次&#xff0c;则dp[i][j] dp[i][j-2]*号匹配…

Mybatis源码解析4:获取Session、Mapper

Mybatis源码解析4&#xff1a;获取Session、Mapper 1.项目结构2. 源码分析2.1 获取Session DefaultSqlSessionFactory#openSession2.2 获取Mapper DefaultSqlSession#getMapper 1.项目结构 2. 源码分析 2.1 获取Session DefaultSqlSessionFactory#openSession private SqlSe…

利用人工智能算法解决内存垃圾回收问题

内存垃圾回收是计算机领域中的一个重要问题&#xff0c;可以利用人工智能算法解决此问题。常用的人工智能算法包括遗传算法、模拟退火算法、禁忌搜索算法等。 其中&#xff0c;遗传算法是一种基于自然选择和遗传进化的算法&#xff0c;可以用于优化问题。在内存垃圾回收中&…

Python实战演练之Python实现一个简单的天气查询应用

今天&#xff0c;晓白给大家分享Python实现一个简单的天气查询应用&#xff0c;帮助大家获取实时的天气信息&#xff0c;内容仅供学习交流。 首先&#xff0c;我们需要安装一个名为"requests"的Python库&#xff0c;它可以帮助我们发送HTTP请求并获取响应数据。你可…

Kernel(一):基础

本文主要讨论210的kernel基础相关知识。 内核驱动 驱动是内核中的硬件设备管理模块,工作在内核态,程序故障可能导致内核崩溃,程序漏洞会使内核不安全 根文件系统提供根目录,进程存放在根文件系统中,内核启动最后会装载根文件系统 应用程序不属于内核,…