当前位置: 首页 > news >正文

【Vue】Vue3.0(十)toRefs()和toRef()的区别及使用示例

上篇文章:Vue】Vue(九)OptionsAPI与CompositionAPI的区别

🏡作者主页:点击!

🤖Vue专栏:点击!

⏰️创作时间:2024年10月15日11点13分

文章目录

  • toRefs()和toRef()的区别及使用示例
    • 一、区别
      • (一)功能目的
      • (二)返回值类型
      • (三)使用场景侧重
    • 二、使用例子
      • (一)toRef示例
      • (二)toRefs示例

toRefs()和toRef()的区别及使用示例

一、区别

(一)功能目的

  • toRef
    • toRef的主要目的是将一个reactive对象中的某个属性转换为一个ref。这个转换后的ref与原reactive对象中的属性保持“响应式连接”,即修改ref的值会反映到原reactive对象中,反之亦然。
  • toRefs
    • toRefs用于将一个reactive对象的所有属性都转换为对应的ref对象。这样做的好处是在解构reactive对象时,不会丢失响应式特性。

根据下面的那张图
为了更容易理解:这种大白话说就是,toRefs()接受一个响应式的reactive对象,并将其中的所有的属性都取出来,并且将旧的响应式对象中的每一个属性都拿出来,并都分别被ref包裹,形成一个新的对象,对象中依然有name和age属性,只不过name和age的值分别都是ref(person.name)了:
{name:ref(person.name),age:ref(person.age)}
在这里插入图片描述

(二)返回值类型

  • toRef
    • 返回一个单独的ref对象。例如,如果有一个reactive对象state,使用toRef(state, 'property')会返回一个针对state.propertyref对象。
  • toRefs
    • 返回一个包含多个ref对象的普通对象。每个属性对应原reactive对象中的一个属性转换后的ref

(三)使用场景侧重

  • toRef
    • 适用于当需要单独操作reactive对象中的某个属性,并且希望保持与原对象的响应式连接时。例如,在函数传递中,只想传递某个特定属性并且保持响应式。
  • toRefs
    • 当需要解构一个reactive对象并且在解构后仍然保持每个属性的响应式时非常有用。这在将reactive对象的属性暴露给外部或者在组件内部进行更方便的属性操作时经常使用。

二、使用例子

(一)toRef示例

  1. 基础示例

    • 首先创建一个reactive对象:
    import { reactive, toRef } from 'vue';const state = reactive({count: 0,message: 'Hello'
    });const countRef = toRef(state, 'count');console.log(countRef.value); // 0countRef.value++;console.log(state.count); // 1
    
    • 在这个例子中,通过toRefreactive对象state中的count属性转换为一个ref对象countRef。修改countRef的值,会同时改变原reactive对象state中的count属性值。
  2. 函数传递示例

    • 假设有一个函数,它接受一个ref类型的参数并且在函数内部修改这个参数的值:
    const updateValue = (refValue) => {refValue.value = 10;
    };const state = reactive({num: 5
    });const numRef = toRef(state, 'num');updateValue(numRef);console.log(state.num); // 10
    
    • 这里将reactive对象中的num属性转换为ref后传递给updateValue函数,函数内部对ref值的修改反映到了原reactive对象上。

(二)toRefs示例

  1. 基础示例

    • 同样先创建一个reactive对象:
    import { reactive, toRefs } from 'vue';const state = reactive({name: 'John',age: 30
    });const refs = toRefs(state);console.log(refs.name.value); // Johnrefs.age.value++;console.log(state.age); // 31
    
    • 使用toRefsreactive对象state的所有属性转换为ref对象。然后可以通过解构后的refs对象方便地操作每个属性,并且这些操作会反映到原reactive对象上。
  2. 在组件中的应用示例

    • 在Vue组件中,当要将reactive对象的属性暴露给模板时,可以使用toRefs来保持响应式:
    import { reactive, toRefs, defineComponent } from 'vue';const MyComponent = defineComponent({setup() {const state = reactive({isVisible: false,text: 'Some text'});const refs = toRefs(state);return {...refs};}
    });
    
    • 在这个组件的setup函数中,将reactive对象state转换为refs后,直接将所有属性通过展开运算符返回给模板使用。这样在模板中可以直接使用isVisibletext,并且它们保持响应式特性。

相关文章:

【Vue】Vue3.0(十)toRefs()和toRef()的区别及使用示例

上篇文章:Vue】Vue(九)OptionsAPI与CompositionAPI的区别 🏡作者主页:点击! 🤖Vue专栏:点击! ⏰️创作时间:2024年10月15日11点13分 文章目录 toRefs()和toRe…...

中科星图(GVE)——使用随机森林方法进行土地分类

目录 简介 函数 gve.Classifier.smileRandomForest(numberOfTrees,variablesPerSplit,minLeafPopulation,bagFraction,maxNodes,seed) 代码 结果 简介 使用随机森林方法进行土地分类的步骤如下: 数据准备:收集所需的土地分类数据,并对数…...

【蓝队技能】【C2流量分析】MSFCSSliver

蓝队技能 MSF&CS&Sliver 蓝队技能总结前言一、MSF1.1 流量分析1.2 特征提取 二、CS1.1 流量分析1.2 特征提取 二、Sliver1. 特征分析 总结 前言 不同C2工具的流量特征都有细微差别,学会分析方法后就可以进行分析 一、MSF 1.1 流量分析 MSF流量特征过于明显…...

不推荐使用Scilab作为MATLAB的开源替代

安装了Scilab2024.1.0,随便试了几分钟就发现有严重影响使用的Bug(也可能是就是这样设计的,有一个所谓的“暂停模式”),复现步骤:主界面上点击“Scilab示例”按钮,打开“演示”窗口,点击左侧列表中的“多项式…...

C++智能指针及其应用

C11之后出现了 shared_ptr 和 unique_ptr,这两个类都是基于RAII技术进行设计的 RAII 利用对象生命周期来控制程序资源(如内存,文件句柄,网络连接,互斥量等资源)的技术,具体地说,就是…...

06 算法基础:算法的定义、表现形式(自然语言、伪代码、流程图)、五个特性(有穷性、确定性、可行性、输入、输出)、好算法的设计目标

目录 1 算法的定义 2 算法的三种表现形式 2.1 自然语言 2.2 伪代码 2.3 流程图 3 算法的五个特性 3.1 有穷性 3.2 确定性 3.3 可行性 3.4 输入 3.5 输出 4 好算法的设计目标 4.1 正确性 4.2 可读性 4.3 健壮性 4.4 通用性 4.5 高效率与低存储量 1 算法的定义 …...

【红外传感器】STM32C8T6标准库使用红外对管

好好学习,天天向上 前言一、了解红外二、标准库的代码1.infrared.c2.infrared.h3.main.c4 现象 总结 前言 红外线:频率介于微波与可见光之间的电磁波。 参考如下 【STM32】标准库与HAL库对照学习教程外设篇–红外避障传感器 光电红外传感器详解&#…...

STM32L010F4 最小系统设计

画一个 STM32L010F4 的测试板子...... by 矜辰所致前言 最近需要用到一个新的 MCU: STM32L010F4 ,上次测试的 VL53L0X 需要移植到这个芯片上,网上一搜 STM32L010F4,都是介绍资料,没有最小系统,使用说明等。…...

AI 工具大赏:探索智能时代的得力助手

在当今这个科技飞速发展的时代,人工智能(AI)技术已经深入到我们生活的方方面面。从日常办公到创意设计,从学术研究到娱乐休闲,AI 工具正以其强大的功能和便捷的使用体验,成为人们不可或缺的得力助手。那么&…...

安通物流借助CRM重塑企业客户关系管理新格局

安通控股股份有限公司(以下简称"安通控股")是一家扎根集装箱多式联运物流产业的现代综合物流服务企业,致力于为客户提供绿色、经济、高效、安全的集装箱全程物流解决方案。 据Alphaliner排名统计,截至2023年10月,安通控股综合运力全球排名21位,位居国内内贸集装箱物…...

C++标准模板库--vector

vector 介绍 vector(向量)是一种序列容器,表示为可以改变大小的数组。vector中的元素使用连续的存储位置,这意味着也可以使用指向其元素的常规指针偏移量来访问任意元素,且与数组一样高效。但与数组不同的是&#xff…...

通信学习干货:运营商为什么要大力推广FTTR?

随着数字化时代的来临,互联网的需求不断增长,家庭网络也在不断演进。光纤到家(FTTH)已经成为提供高速互联网连接的标配,但随着技术的发展,我们迎来了FTTR(光纤到房间)技术&#xff0…...

【Spring篇】初识之Spring的入门程序及控制反转与依赖注入

🧸安清h:个人主页 🎥个人专栏:【计算机网络】,【Mybatis篇】 🚦作者简介:一个有趣爱睡觉的intp,期待和更多人分享自己所学知识的真诚大学生。 文章目录 🎯初始Spring …...

OpenLayers:构建高质量的Web地图应用

OpenLayers:构建高质量的Web地图应用 文章目录 OpenLayers:构建高质量的Web地图应用简介为什么选择 OpenLayers?跨平台兼容性高性能渲染高度可定制化社区支持 安装与设置功能扩展矢量图层地理编码投影转换 交互与事件其他高级特性控制动画数据…...

Java比较两个Excel是否内容一致

领导每天让比较两个Excel中的内容,为了节省工作效率多摸鱼,就写了个java接口,通过上传两个文件 进行代码比较得到详细的比较结果(这个需要自己根据日志二开) 目前只实现了比较功能 话不多说直接上代码,具体看注释 package com.yx…...

UniApp入门教程

UniApp X 是一种用于构建跨平台应用程序的框架,它基于 Vue.js 并通过 UniApp 技术栈支持多种平台,如微信小程序、支付宝小程序、H5、Android 和 iOS。以下是 UniApp X 的一些关键特点和基础知识: UniApp X 的特点 跨平台支持: 可…...

Vue.js中使用Element UI实现动态表单项管理及验证

在Vue.js项目中,表单是与用户交互的重要部分,特别是在需要动态管理表单项的场景下,如何优雅地实现添加、删除、上移、下移及验证功能变得尤为重要。本文将详细介绍如何使用Element UI来实现一个包含动态表单项管理以及验证功能的表单。 效果…...

一插U盘就提示格式化?原因、恢复与预防全攻略

一、现象直击:U盘插入电脑即提示格式化 在日常的工作与生活中,U盘作为重要的数据存储和传输工具,被广泛应用于各类场景。然而,有时当我们满怀期待地将U盘插入电脑时,却会遭遇一个令人头疼的问题——系统弹出提示框&am…...

云电脑使用教程标准版

云电脑,也称为云桌面,是一种通过互联网连接远程服务器,使用虚拟桌面环境来执行计算任务的技术。川翔云电脑通过创建软件镜像,让用户能够快速启动并使用预配置的软件和资料,提供高效且经济的云服务。相较于公有云服务&a…...

浏览器服务端文件下载控制(安全阻止、文件浏览器打开还是下载行为控制)

文章目录 简介Chrome已阻止不安全内容下载PDF直接打开txt、xml、js文件被自动打开了而不是下载阿里OSS设置response header阿里OSS修改metadata 简介 随着浏览器的发展,有很多安全方面的限制,对我们的文件下载行为产生了很大的影响。 在JavaScript下载…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

ES6从入门到精通:前言

ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...