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

news/2025/2/15 5:45:21/

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有…