toRefs的用法
文章目录
- toRefs是什么
- toRefs的作用以及为什么要用它?
toRefs是什么
toRefs 是 Vue 3 Composition API 中的一个函数,它用于将响应式对象转换为普通对象,其中对象的每个属性都是 ref 对象。这是因为在 Vue 3 中,reactive 创建的对象的属性是响应式的,而不是 ref 对象。
使用 toRefs 的主要场景是在模板中使用响应式对象的属性时,因为在模板中使用 ref 对象的属性时,Vue 会自动解包它们。而对于响应式对象,你需要手动解包它们,或者使用 toRefs 进行转换。
下面是一个简单的例子:
因为toRefs 有不同的使用方式,具体取决于需求:
1、将整个响应式对象转换为 ref 对象:
const stateAsRef = toRefs(state);
2、仅转换某个属性:
const countAsRef = toRefs({ count: state.count });
3、在 setup 函数中使用:
import { toRefs } from 'vue';
export default {setup() {const state = reactive({count: 0,message: 'Hello, Vue 3!',});// 在 setup 函数中使用 toRefsconst { count, message } = toRefs(state);return { count, message };},
};
在这个例子中,count 和 message 都是 ref 对象,可以直接在模板中使用,而无需手动解包。这样做的好处是,在模板中能够正确地触发更新,而不必担心 ref 和响应式对象之间的区别。
toRefs的作用以及为什么要用它?
当我们在模板中使用响应式对象的属性时,Vue 3 会自动追踪这些属性的依赖关系,确保在数据变化时触发重新渲染。但是,如果我们直接在模板中使用 reactive 创建的对象的属性,Vue 3 将不会自动追踪它们的依赖关系,Vue 3 不会自动将这个属性转换为 ref 对象,是因为 reactive 函数返回的对象是一个 Proxy 对象,而不是像 ref 那样直接包装的响应式对象。
ref 对象的特点是具有自动包装和解包的能力。当你在模板中使用 ref 对象的属性时,Vue 会自动解包这个属性,确保建立属性与视图的依赖关系,使其具备响应式特性。
而 reactive 返回的是一个 Proxy 对象,Proxy 是一种强大的对象拦截器,它可以拦截对象的各种操作,但它并不对对象进行自动解包。这就导致了在模板中直接使用 reactive 对象的属性时,Vue 不会自动解包,也就无法正确建立依赖关系。
toRefs 的作用就是解决这个问题。它会将响应式对象的每个属性转换为 ref 对象,使得在模板中使用这些属性时能够正确追踪依赖关系。这样,我们可以在模板中直接使用解构出来的 ref 对象,而不必担心依赖追踪的问题。
在模板中使用 toRefs 转换后的 ref 对象:
<template><div><p>Count: {{ count }}</p><p>Message: {{ message }}</p></div>
</template>
这样,Vue 将正确地追踪 count 和 message 的依赖关系,确保在它们变化时重新渲染视图。
需要注意的是,toRefs 主要用于解决在模板中使用 reactive 对象的属性时的依赖追踪问题。在其他场景,如果你需要获取 ref 对象,可以直接使用 ref 函数。
比如这样:
import { ref } from 'vue';const count = ref(0);
相关文章:
toRefs的用法
文章目录 toRefs是什么toRefs的作用以及为什么要用它? toRefs是什么 toRefs 是 Vue 3 Composition API 中的一个函数,它用于将响应式对象转换为普通对象,其中对象的每个属性都是 ref 对象。这是因为在 Vue 3 中,reactive 创建的对…...
MySQL基础篇(三)约束
一、概述 概念:约束是作用于表中字段上的规则,用于限制存储在表中的数据。 目的:保证数据库中数据的正确、有效性和完整性。 分类: 注意:约束是作用于表中字段上的,可以在创建表/修改表的时候添加约束。 二…...
Java进阶 1-2 枚举
目录 常量特定方法 职责链模式的枚举实现 状态机模式的枚举实现 多路分发 1、使用枚举类型实现分发 2、使用常量特定方法实现分发 3、使用EnumMap实现分发 4、使用二维数组实现分发 本笔记参考自: 《On Java 中文版》 常量特定方法 在Java中,我们…...
一个人最大的内驱力是什么?
1、不因为孤独或外界压力而降低「生活标准“」的能力。 ”因为寂寞去约炮“、“因为家里催婚匆忙结婚“、”因为没谈过恋爱随便找个人交往。 “你的每一次选择都是在为自己想要的世界而投的票,往后余生是幸福还是悲剧,就是在这一次次 的将就与坚持死磕中…...
解决方法:公众号的API上传素材报错40005
公众号的API上传素材报错40005 Error uploading file : {"errcode":40005,"errmsg":"invalid file type hint: [YOkxGA0122w487] rid: 223442-323247e7bd5-5d75322d88"}上传错误原因分析: 之前成功的示例,文件名为"…...
音量控制软件sound control mac功能亮点
sound control mac可以帮助用户控制某个独立应用程序的音量,通过每应用音量,均衡器,平衡和音频路由独立控制每个应用的音频,还有整个系统的音量。 sound control mac功能亮点 每个应用程序的音量控制 独立控制应用的数量。 键盘音…...
Spring Boot 生产就绪中文文档-下
本文为官方文档直译版本。原文链接 由于篇幅较长,遂分两篇。上半部分中文文档 Spring Boot 生产就绪中文文档-下 度量标准入门受支持的监控系统AppOpticsAtlasDatadogDynatracev2 API自动配置手动配置 v1 API (旧版)与版本无关的设置 ElasticGangliaGraphiteHumioIn…...
DS|树结构及应用
题目一:DS树 -- 树的先根遍历(双亲转先序) 题目描述: 给出一棵树的双亲表示法结果,用一个二维数组表示,位置下标从0开始,如果双亲位置为-1则表示该结点为根结点 编写程序,输出该树…...
Java 读取超大excel文件
注意:此参考解决方案只是针对xlsx格式的excel文件! Maven <dependency><groupId>com.monitorjbl</groupId><artifactId>xlsx-streamer</artifactId><version>2.2.0</version> </dependency>读取方式1…...
K8S中的job和CronJob
Job 介绍 Kubernetes jobs主要是针对短时和批量的工作负载。它是为了结束而运行的,而不是像deployment、replicasets、replication controllers和DaemonSets等其他对象那样持续运行。 示例 apiVersion: batch/v1 kind: Job metadata:name: pispec:template:spec:r…...
中国文化文物和旅游统计年鉴,数据含pdf、excel等格式,文本形式呈现,可预览数据
基本信息. 数据名称: 中国旅游统计年鉴 数据格式: pdf、xls不定 数据时间: 2012-2020年 数据几何类型: 文本 数据坐标系: —— 数据来源:文化和旅游部、网络公开数据 原名为《中国旅游统计年鉴》2020年后更名为《中国文化文物和旅游统计年鉴》ÿ…...
Java版企业电子招标采购系统源码——鸿鹄电子招投标系统的技术特点
在数字化时代,采购管理也正经历着前所未有的变革。全过程数字化采购管理成为了企业追求高效、透明和规范的关键。该系统通过Spring Cloud、Spring Boot2、Mybatis等先进技术,打造了从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通过…...
go语言语法基础
文章目录 前言一、输入和输出常用的字符串格式化符号 二、注释三、Go常用基本语言数据类型数字类型布尔类型字符类型变量与常量数组和切片数组切片 map类型创建map增删改查特别提醒 指针 四、运算符五、条件判断语句if系列switch六、循环语句for循环标准写法死循环while循环do …...
eclipse 和java环境的安装教程
安装 Eclipse 和配置 Java 环境是一个多步骤的过程,涉及到安装 Java Development Kit (JDK) 和 Eclipse IDE。以下是基本步骤: 安装 Java Development Kit (JDK) 下载 JDK: 访问 Oracle 官方网站(Oracle JDK)或者选择…...
Win11系统的优化方法参考文档(彻底优化策略)
目录 一、个性化-应用-关闭防火墙等的设置 二、任务栏优化设置 三、Win11开始菜单更改为Win10经典菜单 四、将Micresoft Store 从固定任务栏取消 五、电源性能优化 六、解决卡顿 七、卸载系统自带软件 八、任务管理器开机启动项的禁用 九、调整为最佳性能 十…...
Leetcode13-解密消息(2325)
1、题目 给你字符串 key 和 message ,分别表示一个加密密钥和一段加密消息。解密 message 的步骤如下: 使用 key 中 26 个英文小写字母第一次出现的顺序作为替换表中的字母 顺序 。 将替换表与普通英文字母表对齐,形成对照表。 按照对照表 …...
二进制安装包安装Prometheus插件安装(mysql_exporter)
简介 mysql_exporter是用来收集MysQL或者Mariadb数据库相关指标的,mysql_exporter需要连接到数据库并有相关权限。既可以用二进制安装部署,也可以通过容器形式部署,但为了数据收集的准确性,推荐二进制安装。 一,下载安…...
原生微信小程序如何动态修改svg图片颜色及尺寸、宽高(封装svgIcon组件)
最终效果 前言 动态设置Svg图片颜色就是修改Svg源码的path中的fill属性, 通过wx.getFileSystemManager().readFile读取.xlsx文件 把文件转成base64 封装svg-icon组件 1、在项目的components下新建svg-icon文件夹,新增base64.js文件 class Base64 {cons…...
Python从入门到网络爬虫(面向对象详解)
前言 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的。本章节我们将详细介绍Python的面向对象编程。如果你以前没有接触过面向对象的编程语言,那你可能需要先了解一些面向对象语言的一些基本…...
NPDP产品经理含金量高吗?难考吗?
NPDP的中文翻译为产品经理国际资格认证。NPDP考试起源于美国,由美国产品开发与管理协会(PDMA)发起。NPDP认证是集理论、方法与实践为一体的全方位知识体系,为公司组织层级进行规划、决策、执行提供良好的方法体系支撑。࿰…...
目标检测 YOLOv5 - 推理时的数据增强
目标检测 YOLOv5 - 推理时的数据增强 flyfish 版本 YOLOv5 6.2 参考地址 https://github.com/ultralytics/yolov5/issues/303在训练时可以使用数据增强,在推理阶段也可以使用数据增强 在测试使用数据增强有个名字叫做Test-Time Augmentation (TTA) 实际使用中使…...
篇二:springboot2.7 OAuth2 server使用jdbc存储RegisteredClient
上一篇 <<springboot 2.7 oauth server配置源码走读一>>中简单描述了oauth2 server的配置,其中使用了内存保存 RegisteredClient,本篇改用mysql存储。 db存储需要创建表,表结构应该是什么样的呢,从spring给我们封装好…...
卷积神经网络|导入图片
在学习卷积神经网络时,我们通常使用的就是公开的数据集,这里,我们不使用公开数据集,直接导入自己的图片数据,下面,就简单写个程序实现批量图片的导入。 import osfrom PIL import Imageimport numpy as np…...
关于unity的组件VerticalLayoutGroup刷新显示不正常的问题
先说明一下我是如何用到,有哪些处理的 用到这个组件基本上都是将列表进行排版操作的,竖着,或者横着,横着用HorizontalLayoutGroup 还有一个和这个组件搭配的组件叫ContentSizeFitter 先说我是怎么发现这个组件不好用的 //本地读取…...
wait 和 notify 这个为什么要在synchronized 代码块中?
一个工作七年的小伙伴,竟然不知道” wait”和“notify”为什么要在 Synchronized 代码块中 。 好吧,如果屏幕前的你也不知道,请在公屏上刷”不知道“。 对于这个问题,我们来看看普通人和高手的回答。 一、问题解析 1. wait 和 n…...
大白话说区块链和通证
1 区块链 简单地说,区块链其实就像是一个不可篡改的分布式数据库,该分布式数据库记录了一系列交易或事件。区块链运行在至少1个以上的节点上,每个节点都有自己的一个分布式数据库,也就是分布式账本。正常情况下,每个节…...
Jvm之垃圾收集器(个人见解仅供参考)
问:什么是垃圾收集算法中的分代收集理论? 答:分代收集理论是垃圾收集算法的一种思想,根据对象存活周期的不同将内存分为几块,一般将java堆分为新生代和老年代。这种理论使得我们可以根据各个年代的特点选择合适的垃圾收…...
Minitab 21软件安装包下载及安装教程
Minitab 21下载链接:https://docs.qq.com/doc/DUkNHZVhwTXhtTFla 1.选中下载好的安装包,鼠标右键解压到”Minitab 21“文件夹 2.选中”Setup.exe“,鼠标右击选择“以管理员身份运行” 3.点击“下一步” 4.点击“是” 5.点击“下一步” 6.勾选…...
Java版商城:Spring Cloud+SpringBoot b2b2c电子商务平台,多商家入驻、直播带货及免 费 小程序商城搭建
随着互联网的快速发展,越来越多的企业开始注重数字化转型,以提升自身的竞争力和运营效率。在这个背景下,鸿鹄云商SAAS云产品应运而生,为企业提供了一种简单、高效、安全的数字化解决方案。 鸿鹄云商SAAS云产品是一种基于云计算的…...
阿里云被拉入黑洞模式怎么办?该怎么换ip-速盾网络
被拉入黑洞模式(BGP黑洞路由)意味着所有进入目标IP的流量都会被丢弃,从而导致目标IP对外完全不可访问。这种情况通常发生在面对大规模DDoS攻击时,为了防止攻击流量对其他网络造成影响。如果你使用的是阿里云服务并遭受到这种攻击&…...
wordpress多级分销插件/短视频排名seo
准备写这篇blog之前,突然发现自己真的不应该挑这样一个虽然很有前途的,但是目前并不火,大家都很陌生得话题开始谈虚拟化。原因是桌面虚拟化涉及的技术很多,因素也很多,目前最火的服务器虚拟化,与其相比&…...
衡水做网站报价/seo发包软件
更新: 遥控器映射字母失效(A、X等),经测试如下正常使用 Input.GetAxisRaw("Horizontal")/Input.GetAxisRaw("Vertical") Input.GetKeyDown(KeyCode.JoystickButton0)//菜单 Input.GetKeyDown(KeyCode.JoystickButton14)//触摸区域…...
那些网站布局好看/深圳谷歌优化seo
构造函数 function Promise(fn) {this.status "pending"; // promise的状态 pending/fullfiled/rejected,不可逆转this.fn fn; // 保存promise传入的回调,在then里面执行 } 复制代码then函数 Promise.prototype.then function(onFullfilled…...
帮人做兼职的网站吗/北京建站
排序和搜索是数据结构和算法学习中的两个最基本的操作。关于排序,我在上一篇已经做了比较详细的介绍,请参考 http://www.cnblogs.com/chenxizhang/archive/2009/04/22/1441209.html 这一篇我们来关注一下搜索。我们同样把目光放在Array这个最基础的数据类…...
哪个网站能看到学做标书/西安百度竞价托管公司
我们都知道,当您开始使用 Mac 时,一切都会完美运行且运行顺畅。您可以轻松找到所需的一切,而且您的 Mac 速度快如闪电。 但是,一旦您使用它一段时间,它就会变慢,变得杂乱无章,并且使用它不再有…...
链家在线网站是哪个公司做的/百度一下你就知道了官网
首先注册一个代理(firewall): options->global options->firewall->add->socks5 在会话中设置成当前的代理: session->Session Options ->ssh2,在下拉菜单选择代理。...