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

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的作用以及为什么要用它&#xff1f; toRefs是什么 toRefs 是 Vue 3 Composition API 中的一个函数&#xff0c;它用于将响应式对象转换为普通对象&#xff0c;其中对象的每个属性都是 ref 对象。这是因为在 Vue 3 中&#xff0c;reactive 创建的对…...

MySQL基础篇(三)约束

一、概述 概念&#xff1a;约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据。 目的&#xff1a;保证数据库中数据的正确、有效性和完整性。 分类&#xff1a; 注意&#xff1a;约束是作用于表中字段上的&#xff0c;可以在创建表/修改表的时候添加约束。 二…...

Java进阶 1-2 枚举

目录 常量特定方法 职责链模式的枚举实现 状态机模式的枚举实现 多路分发 1、使用枚举类型实现分发 2、使用常量特定方法实现分发 3、使用EnumMap实现分发 4、使用二维数组实现分发 本笔记参考自&#xff1a; 《On Java 中文版》 常量特定方法 在Java中&#xff0c;我们…...

一个人最大的内驱力是什么?

1、不因为孤独或外界压力而降低「生活标准“」的能力。 ”因为寂寞去约炮“、“因为家里催婚匆忙结婚“、”因为没谈过恋爱随便找个人交往。 “你的每一次选择都是在为自己想要的世界而投的票&#xff0c;往后余生是幸福还是悲剧&#xff0c;就是在这一次次 的将就与坚持死磕中…...

解决方法:公众号的API上传素材报错40005

公众号的API上传素材报错40005 Error uploading file : {"errcode":40005,"errmsg":"invalid file type hint: [YOkxGA0122w487] rid: 223442-323247e7bd5-5d75322d88"}上传错误原因分析&#xff1a; 之前成功的示例&#xff0c;文件名为"…...

音量控制软件sound control mac功能亮点

sound control mac可以帮助用户控制某个独立应用程序的音量&#xff0c;通过每应用音量&#xff0c;均衡器&#xff0c;平衡和音频路由独立控制每个应用的音频&#xff0c;还有整个系统的音量。 sound control mac功能亮点 每个应用程序的音量控制 独立控制应用的数量。 键盘音…...

Spring Boot 生产就绪中文文档-下

本文为官方文档直译版本。原文链接 由于篇幅较长&#xff0c;遂分两篇。上半部分中文文档 Spring Boot 生产就绪中文文档-下 度量标准入门受支持的监控系统AppOpticsAtlasDatadogDynatracev2 API自动配置手动配置 v1 API (旧版)与版本无关的设置 ElasticGangliaGraphiteHumioIn…...

DS|树结构及应用

题目一&#xff1a;DS树 -- 树的先根遍历&#xff08;双亲转先序&#xff09; 题目描述&#xff1a; 给出一棵树的双亲表示法结果&#xff0c;用一个二维数组表示&#xff0c;位置下标从0开始&#xff0c;如果双亲位置为-1则表示该结点为根结点 编写程序&#xff0c;输出该树…...

Java 读取超大excel文件

注意&#xff1a;此参考解决方案只是针对xlsx格式的excel文件&#xff01; Maven <dependency><groupId>com.monitorjbl</groupId><artifactId>xlsx-streamer</artifactId><version>2.2.0</version> </dependency>读取方式1…...

K8S中的job和CronJob

Job 介绍 Kubernetes jobs主要是针对短时和批量的工作负载。它是为了结束而运行的&#xff0c;而不是像deployment、replicasets、replication controllers和DaemonSets等其他对象那样持续运行。 示例 apiVersion: batch/v1 kind: Job metadata:name: pispec:template:spec:r…...

中国文化文物和旅游统计年鉴,数据含pdf、excel等格式,文本形式呈现,可预览数据

基本信息. 数据名称: 中国旅游统计年鉴 数据格式: pdf、xls不定 数据时间: 2012-2020年 数据几何类型: 文本 数据坐标系: —— 数据来源&#xff1a;文化和旅游部、网络公开数据 原名为《中国旅游统计年鉴》2020年后更名为《中国文化文物和旅游统计年鉴》&#xff…...

Java版企业电子招标采购系统源码——鸿鹄电子招投标系统的技术特点

在数字化时代&#xff0c;采购管理也正经历着前所未有的变革。全过程数字化采购管理成为了企业追求高效、透明和规范的关键。该系统通过Spring Cloud、Spring Boot2、Mybatis等先进技术&#xff0c;打造了从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通过…...

go语言语法基础

文章目录 前言一、输入和输出常用的字符串格式化符号 二、注释三、Go常用基本语言数据类型数字类型布尔类型字符类型变量与常量数组和切片数组切片 map类型创建map增删改查特别提醒 指针 四、运算符五、条件判断语句if系列switch六、循环语句for循环标准写法死循环while循环do …...

eclipse 和java环境的安装教程

安装 Eclipse 和配置 Java 环境是一个多步骤的过程&#xff0c;涉及到安装 Java Development Kit (JDK) 和 Eclipse IDE。以下是基本步骤&#xff1a; 安装 Java Development Kit (JDK) 下载 JDK&#xff1a; 访问 Oracle 官方网站&#xff08;Oracle JDK&#xff09;或者选择…...

Win11系统的优化方法参考文档(彻底优化策略)

目录 一、个性化-应用-关闭防火墙等的设置 二、任务栏优化设置 三、Win11开始菜单更改为Win10经典菜单 四、将Micresoft Store 从固定任务栏取消 五、电源性能优化 六、解决卡顿 七、卸载系统自带软件 八、任务管理器开机启动项的禁用 九、调整为最佳性能 十…...

Leetcode13-解密消息(2325)

1、题目 给你字符串 key 和 message &#xff0c;分别表示一个加密密钥和一段加密消息。解密 message 的步骤如下&#xff1a; 使用 key 中 26 个英文小写字母第一次出现的顺序作为替换表中的字母 顺序 。 将替换表与普通英文字母表对齐&#xff0c;形成对照表。 按照对照表 …...

二进制安装包安装Prometheus插件安装(mysql_exporter)

简介 mysql_exporter是用来收集MysQL或者Mariadb数据库相关指标的&#xff0c;mysql_exporter需要连接到数据库并有相关权限。既可以用二进制安装部署&#xff0c;也可以通过容器形式部署&#xff0c;但为了数据收集的准确性&#xff0c;推荐二进制安装。 一&#xff0c;下载安…...

原生微信小程序如何动态修改svg图片颜色及尺寸、宽高(封装svgIcon组件)

最终效果 前言 动态设置Svg图片颜色就是修改Svg源码的path中的fill属性&#xff0c; 通过wx.getFileSystemManager().readFile读取.xlsx文件 把文件转成base64 封装svg-icon组件 1、在项目的components下新建svg-icon文件夹&#xff0c;新增base64.js文件 class Base64 {cons…...

Python从入门到网络爬虫(面向对象详解)

前言 Python从设计之初就已经是一门面向对象的语言&#xff0c;正因为如此&#xff0c;在Python中创建一个类和对象是很容易的。本章节我们将详细介绍Python的面向对象编程。如果你以前没有接触过面向对象的编程语言&#xff0c;那你可能需要先了解一些面向对象语言的一些基本…...

NPDP产品经理含金量高吗?难考吗?

NPDP的中文翻译为产品经理国际资格认证。NPDP考试起源于美国&#xff0c;由美国产品开发与管理协会&#xff08;PDMA&#xff09;发起。NPDP认证是集理论、方法与实践为一体的全方位知识体系&#xff0c;为公司组织层级进行规划、决策、执行提供良好的方法体系支撑。&#xff0…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...

算法刷题-回溯

今天给大家分享的还是一道关于dfs回溯的问题&#xff0c;对于这类问题大家还是要多刷和总结&#xff0c;总体难度还是偏大。 对于回溯问题有几个关键点&#xff1a; 1.首先对于这类回溯可以节点可以随机选择的问题&#xff0c;要做mian函数中循环调用dfs&#xff08;i&#x…...

欢乐熊大话蓝牙知识17:多连接 BLE 怎么设计服务不会乱?分层思维来救场!

多连接 BLE 怎么设计服务不会乱&#xff1f;分层思维来救场&#xff01; 作者按&#xff1a; 你是不是也遇到过 BLE 多连接时&#xff0c;调试现场像网吧“掉线风暴”&#xff1f; 温度传感器连上了&#xff0c;心率带丢了&#xff1b;一边 OTA 更新&#xff0c;一边通知卡壳。…...

npm安装electron下载太慢,导致报错

npm安装electron下载太慢&#xff0c;导致报错 背景 想学习electron框架做个桌面应用&#xff0c;卡在了安装依赖&#xff08;无语了&#xff09;。。。一开始以为node版本或者npm版本太低问题&#xff0c;调整版本后还是报错。偶尔执行install命令后&#xff0c;可以开始下载…...