#Vue3篇:响应式工具ref()、toRef()、 toRefs()、reactive()的用法和区别

news/2024/4/24 5:12:55/

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

http://www.ppmy.cn/news/31359.html

相关文章

Moonbeam生态说|解读2023年Web3发展的前景和亮点

「Moonbeam生态说」是Moonbeam中文爱好者社区组织的社区AMA活动。该活动为媒体和已部署Moonriver或Moonbeam的项目方提供了在主流Moonbeam非官方中文社区内介绍自己的项目信息,包括:项目介绍、团队介绍、技术优势和行业发展等,帮助社区内的Mo…

springcloud3 fegin服务超时的配置和日志级别的配置2

一 fegin的概述 1.1 fegin的默认超时时间 默认fegin客户端只等待1秒钟,超过1秒钟,直接会返回错误。 1.2 架构图 1.2.1 说明 1.2.2 启动操作 1.先启动9001,9002 eureka 2.启动9003 服务提供者 3.启动9006消费者 1.3 情况验证 1.3.1 正常默认情…

二叉树经典14题——初学二叉树必会的简单题

此篇皆为leetcode、牛客中的简单题型和二叉树基础操作,无需做过多讲解,仅付最优解。有需要的小伙伴直接私信我~ 目录 1.二叉树的节点个数 2.二叉树叶子节点个数 3.二叉树第K层节点个数 4.查找值为X的节点 5.leetcode——二叉树的最大深度 6.leetc…

业务流程图TFD和数据流程图DFD例题

业务流程图(TFD)管理业务流程图(Transaction Flow Diagram,简称TFD)用来描述系统各部门、人员之间存在的业务关系、作业顺序以及管理信息流向的图表。绘制该图使用以下四种符号:例题例题1:物资订…

Ubuntu20.04下安装vm17+win10/11

一、安装vmware17 1、官网下载 vmware官网:https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.html 2、安装依赖 sudo apt update sudo apt install build-essential linux-headers-generic gcc make3、权限和安装 到下载的目录下…

【上传项目代码到Git详细步骤】

1.下载安装Git到电脑上(这里我之前已经安装好了,就不细说了)2.进入控制台安装好后右键点击桌面空白部分会多出两个菜单选项,点击第二个Git Bash Here(点击第一个你会爆炸)会弹出一个git控制台,如…

【C++】vector

目录 一、vector的介绍 二、vector的常用接口 1.构造函数和赋值重载 1.1构造函数 1.2赋值重载 2.析构函数 3.迭代器相关操作函数 3.1 begin() 3.2 end() 3.3 rbegin() 3.4 rend() 4.容器元素个数和容量操作函数 4.1 size() 4.2…

【Galois工具开发之路】关于类的重新装载思路

思路 当一个java的类文件发生变更,如果动态的热更新这个新的类文件?目前来说,有两种可能的方式 新增一个自定义ClassLoader,名为NC,让NC去load这个新的类文件,这样就完成了新的类定义的替换 但目前Java有…

做自动化测试选择Python还是Java?

今天,我们来聊一聊测试人员想要进阶,想要做自动化测试,甚至测试开发,如何选择编程语言 前言 自动化测试,这几年行业内的热词,也是测试人员进阶的必备技能,更是软件测试未来发展的趋势。特别是…

Spark MLlib概述

Spark MLlib概述机器学习房价预测模型选型数据探索数据提取准备训练样本模型训练模型效果评估机器学习 机器学习的过程 : 基于历史数据,机器会根据一定的算法,尝试从历史数据中挖掘并捕捉出一般规律再把找到的规律应用到新产生的数据中,从而…

WireShark如何抓包,各种协议(HTTP、ARP、ICMP)的过滤或分析,用WireShark实现TCP三次握手和四次挥手

WireShark一、开启WireShark的大门二、如何抓包 搜索关键字2.1 协议过滤2.2 IP过滤2.3 过滤端口2.4 过滤MAC地址2.5 过滤包长度2.6 HTTP模式过滤三、ARP协议分析四、WireShark之ICMP协议五、TCP三次握手与四次挥手5.1 TCP三次握手实验5.2 可视化看TCP三次握手5.3 TCP四次挥手5.…

doPost的实际使用

目录 前言 一、doPost是什么? 二、使用步骤 1.doPost的请求方法 2.需要引入依赖 总结 前言 本章主要记录一下doPost的请求公用方法的使用。 一、doPost是什么? 它其实就是一个http的post请求方式。 二、使用步骤 1.doPost的请求方法 当我们系…

Semaphore 源码解读

一、Semaphore Semaphore 通过设置一个固定数值的信号量,并发时线程通过 acquire() 获取一个信号量,如果能成功获得则可以继续执行,否则将阻塞等待,当某个线程使用 release() 释放一个信号量时,被阻塞的线程则可以被唤…

51单片机DS18B20的使用

文章目录前言一、DS18B20介绍二、单总线协议三、DS18B20引脚说明四、DS18B20程序编写1.DS18B20复位函数2.DS18B20存在检测3.DS18B20读取一个bit和一个byte函数4.DS18B20写一个字节函数5.开始温度转换函数6.DS18B20初始化函数7.DS18B20读取温度函数五、代码测试总结前言 本篇文…

Vulnhub系列:FristLeaks

一、配置靶机环境以往的靶机,本人是在virtual box中,去配置,和vm上的kali进行联动,但是这个靶机需要DHCP,以往的方式可能不太行了,或者可以在virtual box中桥接成统一网卡。下面介绍下本人最有用的方法&…

[ 云计算 | Azure ] Episode 03 | 描述云计算运营中的 CapEx 与 OpEx,如何区分 CapEx 与 OpEx

正常情况如果你不是会计,或者对钱相关的数字比较敏感的财务,本文的一些东西你不会接触的,但是最为云架构或者云运营,你可能会遇到如何采购亦或者估算的我成本和运营成本等等,所以本文的一些知识点就需要进行一定的了解…

还不会CAD批量打印图纸?学会这招再也不怕

各位工程师,相信大家在工作过程中,经常会遇到需要打印大量图纸文件的时候,那么多的图纸,一张张打印太麻烦,此时便需要用到CAD批量打印功能啦!可是,总有些新手设计师不直达奥CAD批量打印&#xf…

MySQL 主备一致

MySQL 主备一致主备切换binlog 格式statementrowmixed生产格式循环复制问题主备切换 MySQL 主备切换流程 : 状态 1 : 客户端的读写都直接访问节点 A,而节点 B 是 A 的备库,只将 A 的更新都同步过来 , 并本地执行。来保持节点 B 和 A 的数据是相同当切换…

手把手开发一门程序语言JimLang (2)

根据爱因斯坦的相对论,物体的质量越大,时间过得越快,所以托更对于我的煎熬,远远比你们想象的还要痛苦…今天给大家来盘硬菜,也是前些时日预告过的JimLang的开发过程… Let’s go !!! 语法及解析 JimLang.g4 这里我们…

Rust Web入门(八):打包发布

本教程笔记来自 杨旭老师的 rust web 全栈教程,链接如下: https://www.bilibili.com/video/BV1RP4y1G7KF?p1&vd_source8595fbbf160cc11a0cc07cadacf22951 学习 Rust Web 需要学习 rust 的前置知识可以学习杨旭老师的另一门教程 https://www.bili…