VUE3语法--toRefs与toRef用法

news2024/11/13 9:21:03

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({
       //创建setup
       setup(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({

       //创建setup
       setup(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.coloradmin.cn/o/1305294.html

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

相关文章

【探讨】bp神经网络是前馈还是后馈

目录 一、BP神经网络简介 1.1 什么是BP神经网络 1.2 BP神经网络的结构 二、BP神经网络的前馈与后馈 2.1 什么是BP神经网络的前馈 2.2 什么是BP神经网络的后馈 三、BP神经网络前馈与后馈的关系 3.1 BP神经网络前馈与后馈的区别 3.2 BP神经网络前馈与后馈的意义 四、BP…

论文阅读三——端到端的帧到凝视估计

论文阅读三——端到端的帧到凝视估计 主要内容研究问题文章的解题思路文章的主要结构 论文实验关于端到端凝视估计的数据集3种基线模型与EFE模型的对比在三个数据集中与SOTA进行比较 问题分析重要架构U-Net 基础知识 主要内容 文章从端到端的方法出发&#xff0c;提出了根据he…

Linux---虚拟机软件

1. 虚拟机软件的介绍 它是能够虚拟出来计算机的一个软件。 常用虚拟机软件: VmwareVirtualBox 说明: 只有安装了虚拟机软件才可以创建虚拟机&#xff0c;当然通过虚拟机软件还可以创建多个虚拟机。 2. 虚拟机的介绍 就是模拟一个真实的计算机&#xff0c;好比一个虚拟的…

Mybatis映射接口的动态代理实现原理

Mybatis映射接口的动态代理实现原理 在上一节中&#xff0c;我们介绍了MyBatis的核心配置文件加载流程&#xff0c;Mybatis核心配置文件加载流程详解 在文中&#xff0c;我们介绍了MyBatis在加载配置文件的过程中会针对每个接口类都生成一个相应的MapperProxyFactory动态代理工…

【异常解决】SpringBoot + Maven 在 idea 下启动报错 Unable to start embedded Tomcat(已解决)

Unable to start embedded Tomcat&#xff08;已解决&#xff09; 一、背景介绍二、原因分析2.1 网络上整理2.2 其他原因 三、解决方案 一、背景介绍 spring boot(v2.5.14) maven idea 启动项目 之前项目一直启动的好好的&#xff0c;都能正常运行。重启的时候突然就不能启…

单元测试技术

文章目录 一、单元测试快速入门二、单元测试断言三、Junit框架的常用注解 一、单元测试快速入门 所谓单元测试&#xff0c;就是针对最小的功能单元&#xff0c;编写测试代码对其进行正确性测试。 常规的例如如果在main中测试&#xff0c;比如说我们写了一个学生管理系统&…

MSPM0L1306例程学习-ADC部分(1)

MSPM0L1306例程学习-ADC部分(1) MSPM0L1306例程学习 使用的TI的官方例程&#xff0c;即SDK里边包含的例程代码。 MCU使用的是MSPM0L1306, 对于ADC部分&#xff0c;有10个例程&#xff1a; 例程理解 ADC的转换有多种工作模式&#xff0c;从最简单的单通道单次转换开始入手…

C++共享和保护——(1)作用域

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 人生就像骑单车&#xff0c;要想平衡就…

Java - Spring中Bean的循环依赖问题

什么是Bean的循环依赖 A对象中有B属性。B对象中有A属性。这就是循环依赖。我依赖你&#xff0c;你也依赖我。 比如&#xff1a;丈夫类Husband&#xff0c;妻子类Wife。Husband中有Wife的引用。Wife中有Husband的引用。 Spring解决循环依赖的机理 Spring为什么可以解决set s…

ubuntu如何远程ssh登录Windows环境并执行测试命令

ubuntu如何远程ssh登录Windows环境并执行测试命令 1 paramiko模块简介1.1 安装paramiko1.2 paramiko基本用法1.2.1 创建SSHClient实例1.2.2 设置主机密钥策略1.2.3 连接SSH服务器1.2.4 执行命令1.2.5 关闭SSH连接1.2.6 异常处理 2 windows的配置2.1 启动OpenSSH服务2.2 配置防火…

【Qt开发流程】之2D绘图1:概述及基本绘制与填充和渐变填充

概述 Qt的绘图系统可以使用相同的API在屏幕和打印设备上进行绘图&#xff0c;并且主要基于QPainter, QPaintDevice和QPaintEngine类。 QPainter用于执行绘图操作&#xff0c;QPaintDevice是一个二维空间的抽象&#xff0c;可以使用QPainter在其上绘制&#xff0c;QPaintEngine…

Android : XUI- SimpleImageBanner+BannerItem带标题的轮播图-简单应用

示例图&#xff1a; 1.导入XUI http://t.csdnimg.cn/qgGaN 2.MainActivity.java package com.example.viewpagerbanne;import android.os.Bundle; import android.view.View; import android.widget.Toast; import androidx.appcompat.app.AppCompatActivity; import com.xu…

vue项目中 CDN 是vue本身的依赖可以按需加载还是项目中所有的第三方库都可以按需加载?

这是我看到CDN简介时产生的问题 相信很多小伙伴会有 和我一样的疑问 在这里 我也统一回答一下 CDN&#xff08;内容分发网络&#xff09;是一种通过将数据分发到全球各个节点&#xff0c;以提供快速、可靠的内容传输的技术。在Vue项目中&#xff0c;CDN可以用于按需加载Vue本…

Linux--操作系统

1. 常见的操作系统 Windowsmac OSLinuxiOSAndroid 2. 操作系统的定义 操作系统直接运行在计算机上的系统软件&#xff0c; 它是控制硬件和支持软件运行的计算机程序。 3. 操作系统的作用 向下控制硬件向上支持软件的运行&#xff0c;具有承上启下的作用。 4.总结 操作系统…

Server check fail, please check server xxx.xxx.xxx.xxx,port 9848 is available

记录一次服务调用中的错误 背景&#xff1a;我使用了nacos2.x的版本&#xff0c;同时在同一台服务器的三个docker容器中部署了nacos1、2、3&#xff0c;并将它们连接到了同一个docker网络 错误&#xff1a;Server check fail, please check server xxx.xxx.xxx.xxx,port 9848 …

事件驱动架构 vs. RESTful架构:通信模式对比与选择

1. 通信风格 事件驱动架构&#xff08;EDA&#xff09; 是一种异步通信风格&#xff0c;组件之间通过产生和消费事件进行通信。 事件是表示系统中重大变化或事件的消息&#xff0c;并分发给感兴趣的组件。这种通信模型允许系统的不同部分之间进行解耦和动态交互。 组件充当事件…

MTK Android P Sensor架构(一)

需求场景&#xff1a; 本来如果只是给传感器写个驱动并提供能读取温湿度数据的节点&#xff0c;是一件比较轻松的事情&#xff0c;但是最近上层应用的同事要求我们按照安卓标准的流程来&#xff0c;这样他们就能通过注册一个服务直接读取传感器事件数据了。这样做的好处就是第…

从手工测试进阶中高级测试?如何突破职业瓶颈...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、手工测试如何进…

【教3妹学编程-算法题】需要添加的硬币的最小数量

3妹&#xff1a;2哥2哥&#xff0c;你有没有看到新闻&#xff0c; 有人中了2.2亿彩票大奖&#xff01; 2哥 : 看到了&#xff0c;2.2亿啊&#xff0c; 一生一世也花不完。 3妹&#xff1a;为啥我就中不了呢&#xff0c;不开心呀不开心。 2哥 : 得了吧&#xff0c;你又不买彩票&…

Vue 双向绑定:让数据与视图互动的魔法!(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…