#Vue3篇:响应式工具ref()、toRef()、 toRefs()、reactive()的用法和区别
ref()
定义: ref()接收一个普通的Javascript值作为参数,将其转换为响应式对象(ref对象)。
ref对象有一个.value属性,用于获取和修改之。
参数1: 一个普通的Javascript值作为参数
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++ // 1
参数2: 一个工厂函数,用于创建延迟计算的响应式对象。
import { ref } from 'vue'
const name = ref(() => {console.log('计算 name')return 'Vue 3'
})
console.log(name.value) // 计算 name, Vue 3
返回: 响应式对象
toRef()
定义: 将一个响应式对象的属性转换为一个单独的ref对象。
参数:第一个参数,响应式对象;第二个参数,响应式对象的某一属性。
作用:转换后的ref对象与原对象属性具有相同的响应式行为。当修改ref对象时,原对象的属性也会同时更新。
import { reactive, toRef } from 'vue'const user = reactive({name: 'Tom',age: 20
})const ageRef = toRef(user, 'age')console.log(ageRef.value) // 20
ageRef.value++console.log(user.age) // 21
toRefs()
定义: 将一个响应式对象转换成普通Javascript对象,这个普通对象中的所有属性都是ref对象。
参数:响应式对象
作用: 当修改ref对象时,原对象的属性也会同步更新。
import { reactive, toRefs } from 'vue'const user = reactive({name: 'Tom',age: 20
})const userRefs = toRefs(user)console.log(userRefs.age.value) // 20
userRefs.age.value++console.log(user.age) // 21
reactive()
定义:将一个普通Javascript对象转换为响应式对象
参数:普通对象
作用:响应式对象中的所有属性都是响应式的,当属性的值改变时,视图会自动更新。
import { reactive } from 'vue'const user = reactive({name: 'Tom',age: 20
})console.log(user.age) // 20
user.age++
// 视图自动更新
总
ref()用于创建简单的响应式对象;
toRef()用于将响应式对象的属性转换为单独的ref对象;
toRefs()用于将整个响应式对象转换成普通对象,每一个属性都是ref对象;
reactive()用于创建嵌套响应式对象
toRef() & toRefs()是两个不同的函数,用于处理响应式对象中的属性
在 Vue 3 中,toRefs() 和 toRef() 是两个不同的函数,用于处理响应式对象中的属性。
toRefs() 函数接受一个响应式对象,返回一个新的对象,该对象将所有属性转换为 ref 对象。这是因为当我们将响应式对象传递给子组件时,我们需要将其解构为单独的 ref 对象以避免在子组件中更改属性时破坏父组件的响应式追踪。通过使用 toRefs() 函数,我们可以将响应式对象的所有属性转换为 ref 对象,并将其传递给子组件,以便在子组件中使用属性时保持响应式追踪。
import { reactive, toRefs } from 'vue'const state = reactive({name: 'John',age: 30
})const refs = toRefs(state)
console.log(refs.name.value) // 'John'
toRef() 函数接受一个响应式对象和一个属性名称,返回一个新的 ref 对象,该对象引用响应式对象的属性。这是因为在某些情况下,我们只需要引用响应式对象的单个属性,并且不需要将整个响应式对象的属性都转换为 ref 对象。使用 toRef() 函数,我们可以将响应式对象的单个属性转换为 ref 对象。
import { reactive, toRef } from 'vue'const state = reactive({name: 'John',age: 30
})const ageRef = toRef(state, 'age')
console.log(ageRef.value) // 30相关文章:
#Vue3篇:响应式工具ref()、toRef()、 toRefs()、reactive()的用法和区别
ref() 定义: ref()接收一个普通的Javascript值作为参数,将其转换为响应式对象(ref对象)。 ref对象有一个.value属性,用于获取和修改之。 参数1: 一个普通的Javascript值作为参数 import { ref } from vue const count ref(0) c…...
docker容器内安装gcc(trunk 最新版本)以及LLVM
1、docker内部只有wget以及git命令 项目需要,得更新docker容器中的gcc和LLVM版本但是由于没有预先安装apt、apt-get以及yum,导致很多安装过程就是鸡生蛋蛋生鸡反应。暂时没有找到合适的解决的方法,如果有大佬知道的话,欢迎留言哈…...
手把手教你如何做数据报表
数据报表是一种数据可视化形式,它将复杂的数据信息通过图形、表格等形式进行展示和解释,让人们更加直观地理解和分析数据。数据报表已成为现代企业决策的必备工具之一。对企业来说,数据报表有很多用处。首先,数据报表可以帮助企业…...
loadrunner的函数lr_paramarr()学习
好久没更新了,还是太懒了,正好最近有用到这个函数,浅浅记录一下 1、首先关联到的参数是个数组,比如用这个函数获取web_reg_save_param(“param”....); 那么保存到的参数是param_1;param_2;param_3;param_4;param_co…...
Hive---数据导出
数据导出 文章目录数据导出Insert 导出将查询的结果导出到本地将查询的结果格式化导出到本地将查询的结果导出到 HDFS 上Hadoop 命令导出到本地Hive Shell 命令导出Export 导出到 HDFS 上sqoop导出Insert 导出 表为student 将查询的结果导出到本地 insert overwrite local d…...
还不会CAD批量打印图纸?学会这招再也不怕
各位工程师,相信大家在工作过程中,经常会遇到需要打印大量图纸文件的时候,那么多的图纸,一张张打印太麻烦,此时便需要用到CAD批量打印功能啦!可是,总有些新手设计师不直达奥CAD批量打印…...
硬件设计从失败案例中找方法
大家好,我是记得诚。 2022年底,受邀去上海参加电子技术大会,并在一个硬件设计的分论坛做一场演讲,题目是《硬件设计从失败案例中找方法》,一般演讲都是比较紧张的,而且是现场,台下坐着的都是同…...
使用python求PLS-DA的方差贡献率
以鸢尾花数据集为例,实现PLS-DA降维,画出降维后数据的散点图并求其方差贡献率。 效果图 完整代码 # 导入所需库 import numpy as np from sklearn.cross_decomposition import PLSRegression from sklearn.datasets import load_iris from sklearn.pre…...
前端面试题--JavaScript篇
一、JavaScript中的数据类型JavaScript中共有八种数据类型:Number、String、Boolean、Object、Null、Undefined、null、Symbol、BigInt 其中Symbol和BigInt是ES6新增的数据类型Symbol代表独一无二且不可改变的数据类型,主要为了解决可能出现的全局变量冲…...
【批处理脚本】-3.5-pause暂停命令详解
"><--点击返回「批处理BAT从入门到精通」总目录--> 共3页精讲(列举了所有pause的用法,图文并茂,通俗易懂) 在从事“嵌入式软件开发”和“Autosar工具开发软件”过程中,经常会在其集成开发环境IDE(CodeWarrior,S32K DS,Davinci,EB Tresos,ETAS…)中,…...
软件测试11
一 Linux命令的基本格式 格式组成:命令主体 -命令选项 命令参数 常见命令形式: (1)命令主体 (2)命令主体 -命令选项 (3)命令主体 参数 (4)命令主体 -命令选项…...
2023 面试题js、es6篇
什么是闭包? 闭包的定义 闭包是指能够访问另一个函数作用域中的变量的一个函数。 在js中,只有函数内部的子函数才能访问局部变量, 所以闭包可以理解成 “定义在一个函数内部的函数”。 应用场景 将内部的函数返到外部去,让外部…...
(六十六)设计索引的时候,我们一般要考虑哪些因素呢?(下)
今天我们最后来讲一下设计索引的时候,我们一般要考虑哪些因素。 另外还讲了字段基数的问题以及前缀索引的问题, 那么今天接着来讲剩下的一些索引设计的原则。 首先假设你设计好了一个索引,非常棒,接着你在SQL里这么写ÿ…...
python程序设计基础 实验四
⭐python实验专栏,欢迎订阅与关注! ★观前提示:本篇内容为python程序设计实验,代码内容经测试没有问题,但是可能会不符合每个人实验的要求,因此以下内容建议仅做思路参考。 一、实验目的 (1&am…...
ASP.NET CORE API 使用Orleans
快速使用Monimal API 快速集成Orleans 微软官网地址如下:https://learn.microsoft.com/zh-cn/dotnet/orleans/quickstarts/build-your-first-orleans-app?sourcerecommendations&tabsvisual-studio当然它的存储grain存储采用的是内存级别存储,我缓存…...
《论文阅读》软化标签(将one-hot编码转变为grayscale标签)
《论文阅读》The Emotion is Not One-hot Encoding: Learning with Grayscale Label for Emotion Recognition in Conversation 前言简介相关知识grayscale label模型方法CategoryWord-EmbeddingSelfSelf-AdjustFuture-Self损失实验结果前言 你是否也对于理解论文存在困惑? …...
keras图片数字识别入门AI机器学习
通过使用mnist(AI界的helloworld)手写数字模型训练集,了解下AI工作的基本流程。 本例子,要基于mnist数据集(该数据集包含了【0-9】的模型训练数据集和测试数据集)来完成一个手写数字识别的小demo。 mnist…...
使用qt编写一个程序,伪造一个ip访问一个网站。
你好,这是Bing。😊 根据网络搜索结果,使用qt编写一个程序,伪造一个ip访问一个网站的方法可能有以下几种: - 使用X-Forwarded-For请求头来伪造客户端的真实ip地址。这种方法需要在发送请求时添加X-Forwarded-For: 伪造…...
探访人工智能领跑者:纷享销客携手30+TOP高科技企业走进旷视科技
拥有全球规模领先的计算机视觉研究院; 揽获28项世界顶级AI竞赛冠军; 世界级人工智能公司; 没错,它就是人工智能行业的务实者和领跑者,旷视科技。 3月3日,北京软件和信息服务业协会联合纷享销客,…...
UTC、TimeZone、TimeStamp
UTC :Universal Time Coordinated,世界协调时,又称世界标准时间。与UTC time对应的是各个时区的local time,东N区的时间比UTC时间早N个小时,因此UTC time N小时 即为东N区的本地时间;而西N区时间比UTC时间…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案: 语义化标签: <header>:页头<nav>:导航<main>:主要内容<article>&#x…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
