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

#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批量打印&#xf…...

硬件设计从失败案例中找方法

大家好,我是记得诚。 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命令的基本格式 格式组成&#xff1a;命令主体 -命令选项 命令参数 常见命令形式&#xff1a; &#xff08;1&#xff09;命令主体 &#xff08;2&#xff09;命令主体 -命令选项 &#xff08;3&#xff09;命令主体 参数 &#xff08;4&#xff09;命令主体 -命令选项…...

2023 面试题js、es6篇

什么是闭包&#xff1f; 闭包的定义 闭包是指能够访问另一个函数作用域中的变量的一个函数。 在js中&#xff0c;只有函数内部的子函数才能访问局部变量&#xff0c; 所以闭包可以理解成 “定义在一个函数内部的函数”。 应用场景 将内部的函数返到外部去&#xff0c;让外部…...

(六十六)设计索引的时候,我们一般要考虑哪些因素呢?(下)

今天我们最后来讲一下设计索引的时候&#xff0c;我们一般要考虑哪些因素。 另外还讲了字段基数的问题以及前缀索引的问题&#xff0c; 那么今天接着来讲剩下的一些索引设计的原则。 首先假设你设计好了一个索引&#xff0c;非常棒&#xff0c;接着你在SQL里这么写&#xff…...

python程序设计基础 实验四

⭐python实验专栏&#xff0c;欢迎订阅与关注&#xff01; ★观前提示&#xff1a;本篇内容为python程序设计实验&#xff0c;代码内容经测试没有问题&#xff0c;但是可能会不符合每个人实验的要求&#xff0c;因此以下内容建议仅做思路参考。 一、实验目的 &#xff08;1&am…...

ASP.NET CORE API 使用Orleans

快速使用Monimal API 快速集成Orleans 微软官网地址如下&#xff1a;https://learn.microsoft.com/zh-cn/dotnet/orleans/quickstarts/build-your-first-orleans-app?sourcerecommendations&tabsvisual-studio当然它的存储grain存储采用的是内存级别存储&#xff0c;我缓存…...

《论文阅读》软化标签(将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&#xff08;AI界的helloworld&#xff09;手写数字模型训练集&#xff0c;了解下AI工作的基本流程。 本例子&#xff0c;要基于mnist数据集&#xff08;该数据集包含了【0-9】的模型训练数据集和测试数据集&#xff09;来完成一个手写数字识别的小demo。 mnist…...

使用qt编写一个程序,伪造一个ip访问一个网站。

你好&#xff0c;这是Bing。&#x1f60a; 根据网络搜索结果&#xff0c;使用qt编写一个程序&#xff0c;伪造一个ip访问一个网站的方法可能有以下几种&#xff1a; - 使用X-Forwarded-For请求头来伪造客户端的真实ip地址。这种方法需要在发送请求时添加X-Forwarded-For: 伪造…...

探访人工智能领跑者:纷享销客携手30+TOP高科技企业走进旷视科技

拥有全球规模领先的计算机视觉研究院&#xff1b; 揽获28项世界顶级AI竞赛冠军&#xff1b; 世界级人工智能公司&#xff1b; 没错&#xff0c;它就是人工智能行业的务实者和领跑者&#xff0c;旷视科技。 3月3日&#xff0c;北京软件和信息服务业协会联合纷享销客&#xff0c;…...

UTC、TimeZone、TimeStamp

UTC &#xff1a;Universal Time Coordinated&#xff0c;世界协调时&#xff0c;又称世界标准时间。与UTC time对应的是各个时区的local time&#xff0c;东N区的时间比UTC时间早N个小时&#xff0c;因此UTC time N小时 即为东N区的本地时间&#xff1b;而西N区时间比UTC时间…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

Ubuntu 安装 Mysql 数据库

首先更新apt-get工具&#xff0c;执行命令如下&#xff1a; apt-get upgrade安装Mysql&#xff0c;执行如下命令&#xff1a; apt-get install mysql-server 开启Mysql 服务&#xff0c;执行命令如下&#xff1a; service mysql start并确认是否成功开启mysql,执行命令如下&am…...

fast-reid部署

配置设置&#xff1a; 官方库链接&#xff1a; https://github.com/JDAI-CV/fast-reid# git clone https://github.com/JDAI-CV/fast-reid.git 安装依赖&#xff1a; pip install -r docs/requirements.txt 编译&#xff1a;切换到fastreid/evaluation/rank_cylib目录下&a…...