Vue3实战笔记(49)—Vue 3响应式魔法:ref vs reactive深入对决

server/2024/12/22 23:34:16/

文章目录


前言

Vue 3 中的 refreactive 都是用于创建响应式数据的工具,但它们之间存在一些重要的区别。今天聊聊它们之间的主要差异:


ref__reactive_15">一、 refreactive主要差异

数据类型:

ref 主要用于处理基本数据类型(如 string、number、boolean 等)的响应式数据。当你使用 ref 创建一个响应式引用时,它返回的是一个对象,该对象具有一个指向内部值的 value 属性。

reactive 则用于处理复杂数据类型(如对象、数组等)的响应式数据。它直接返回一个响应式代理对象,你可以直接访问和修改其属性。

使用方式:

对于 ref 创建的响应式数据,你需要通过 .value 来访问和修改其值。例如:const count = ref(0); console.log(count.value); count.value++;

对于 reactive 创建的响应式数据,你可以直接访问和修改其属性。例如:const state = reactive({ count: 0 }); console.log(state.count); state.count++;

模板中的使用:

在 Vue 3 的模板中,当你使用 ref 创建的响应式数据时,你仍然需要通过 .value 来访问其值。但是,如果你是在 setup 函数中返回的响应式引用,Vue 会自动解包它,因此在模板中你不需要使用 .value。

对于 reactive 创建的响应式数据,你可以在模板中直接访问其属性,无需任何额外操作。

解构问题:

当从 reactive 对象中解构出属性时,这些属性将失去其响应性。这是因为解构操作返回的是原始值的副本,而不是响应式代理。

为了保持响应性,你可以使用 toRefs 函数来解构 reactive 对象。这将返回一个普通的对象,其属性是响应式引用,因此你可以在模板中直接访问它们而无需使用 .value。

返回值:

ref 返回一个对象,该对象具有一个指向内部值的 value 属性。

reactive 返回一个响应式代理对象,你可以直接操作其属性。


总结

总的来说,refreactive 都是Vue 3中强大的响应式API,选择使用哪一个取决于具体的使用场景和性能考虑。对于基本数据类型或需要替换对象的场景,ref 是合适的选择;而对于需要创建一个响应式状态容器的对象,reactive 是更好的选择。

轻挥一袖桃花雨,醉卧云水笑春阳。


http://www.ppmy.cn/server/47422.html

相关文章

C语言怎样写参数个数可变的宏?

一、问题 在C语⾔中存在参数个数可变的函数,那么是否也存在参数个数可变的宏呢?如果存在,怎样写参数个数可变的宏呢? 二、解答 在C语⾔中存在参数个数可变的宏,⾸先⼤致了解⼀下什么是参数个数可变的函数,…

【JavaEE 进阶(三)】Spring IoCDI

❣博主主页: 33的博客❣ ▶️文章专栏分类:JavaEE◀️ 🚚我的代码仓库: 33的代码仓库🚚 🫵🫵🫵关注我带你了解更多进阶知识 目录 1.前言2.Spring是什么?3.IOC&DI入门3.1IOC3.2DI3.3IoC&DI使用 4.I…

Spring Boot(七十七):SpringBoot实现接口内容协商功能

1 什么是内容协商 简单说就是服务提供方根据客户端所支持的格式来返回对应的报文,在 Spring 中,REST API 基本上都是以 json 格式进行返回,而如果需要一个接口即支持 json,又支持其他格式,开发和维护多套代码显然是不合理的,而 Spring 又恰好提供了该功能,那便是Conten…

【数据结构】链表----头结点的作用

链表是一种常见的数据结构,由一系列节点(Node)组成,每个节点包含数据和指向下一个节点的指针。链表的头结点(Head Node)也称为哨兵位,是链表的起点,通常有以下几个重要作用&#xff…

QT解析JSON格式超简单

目录 还是从最基础开始、什么是JSON 一、只解析json 1..解析JSON的主要类 2.主函数 二、解析并利用结构体存储 1.定义结构体 2.从 JSON 解析并填充结构体 实战示例 还是从最基础开始、什么是JSON JSON(JavaScript Object Notation)是一种轻量级的数…

js 表格添加|删除一行交互

一、需求 二、实现 <div style"margin-bottom: 55px"><form action"" method"post" enctype"multipart/form-data" id"reportForm" name"sjf" style"margin-left: 25px;margin-bottom: 50px;&quo…

k8s练习--StorageClass详细解释与应用

文章目录 前言StorageClass是什么 一、实验目的配置过程 二、实验环境实验步骤一、配置网络存储NFS&#xff1a;1.主机基础配置2.配置 NFS: 二、开启rbac权限:三、创建nfs-deployment.yaml四、创建storageclass资源五、验证&#xff1a;1&#xff0e;创建PVC验证2.创建一个pod验…

go语言初学04

Go 语言近年来发展迅速&#xff0c;并且出现了许多优秀的开发框架和组件来支持各种不同的开发需求。以下是一些常用的 Go 语言开发框架和组件&#xff1a; Web 框架 Gin&#xff1a; URL: Gin简单、高效、易用&#xff0c;适合构建高性能的 Web 应用。 Echo&#xff1a; URL: …