Vue 3 响应式对象:ref 和 reactive 的使用和区别

news2025/1/4 5:38:04

🎉🎉欢迎来到我的CSDN主页!🎉🎉
🏅我是尘缘,一个在CSDN分享笔记的博主。📚📚
👉点击这里,就可以查看我的主页啦!👇👇
尘缘的个人主页
🎁如果感觉还不错的话请给我点赞吧!🎁🎁
💖期待你的加入,一起学习,一起进步!💖💖

在这里插入图片描述

目录

  • 引言
  • 一、介绍
    • 1.1 Vue 3 简介
    • 1.2 响应式对象的重要性
    • 1.3 ref 和 reactive 的概述
  • 二、使用 ref
    • 2.1 ref 的创建方法
    • 2.2 ref 的使用方法
    • 2.3 ref 的适用场景
    • 2.4 ref 的局限性
  • 三、使用 reactive
    • 3.1 reactive 的创建方法
    • 3.2 reactive 的使用方法
    • 3.3 reactive 的适用场景
    • 3.4 reactive 的局限性
  • 四、对比 ref 和 reactive
    • 4.1 响应性方面的对比
    • 4.2 性能方面的对比
    • 4.3 使用场景的对比
    • 4.4 API 使用的对比
  • 五、总结

引言

Vue.js 是一个流行的 JavaScript 框架,它使得开发人员能够轻松地创建用户界面。在 Vue.js 中,响应式对象是非常重要的一部分,它们可以自动更新依赖它们的组件。在 Vue 3 中,有两种创建响应式对象的方法:使用 ref 和使用 reactive。这两种方法有一些区别,本文将详细介绍它们的区别以及使用方法。

一、介绍

1.1 Vue 3 简介

Vue 3 是 Vue.js 的最新版本,它带来了许多新的特性和改进,包括更好的性能、更简单的 API、更好的 TypeScript 支持等等。Vue 3 继续沿用了 Vue 2.x 的开发理念和模式,同时增加了一些新的概念和工具,使得开发者能够更高效地开发前端应用。

1.2 响应式对象的重要性

在 Vue.js 中,响应式对象是非常重要的一部分。当一个对象的属性被改变时,如果这个对象被用在 Vue 组件的模板中,那么这个组件会自动更新以反映新的属性值。这个特性使得开发者能够以声明式的方式构建用户界面,而不需要写很多的更新逻辑。

1.3 ref 和 reactive 的概述

在 Vue 3 中,有两种主要的方法来创建响应式对象:使用 ref 和使用 reactive。

ref 是 Vue 3 中用于创建响应式引用的函数。它返回一个包装过的对象,这个对象的值是可以改变的,但它的引用是不会改变的。这意味着你可以在模板中使用 ref,并且当它的值改变时,模板会自动更新。

reactive 是 Vue 3 中用于创建响应式对象的函数。它返回一个响应式对象,这个对象的属性和方法都可以改变。这意味着你可以在模板中使用 reactive,并且当它的属性或方法改变时,模板会自动更新。

二、使用 ref

2.1 ref 的创建方法

在 Vue 3 中,你可以使用 ref 函数来创建一个响应式引用。ref 函数可以接受一个初始值,并返回一个响应式对象。例如:

import { ref } from 'vue';  
  
const count = ref(0);

在这个例子中,我们创建了一个名为 count 的响应式引用,它的初始值为 0。

2.2 ref 的使用方法

使用 ref 的一个关键点是,你不能直接修改它的值。要修改 ref 的值,你需要使用 .value 属性。例如:

count.value++; // 修改 count 的值

你还可以通过 .get 方法来获取 ref 的当前值。例如:

console.log(count.get()); // 输出 0

2.3 ref 的适用场景

ref 最适合用于那些值需要改变,但引用不会改变的场景。例如,如果你有一个对象,而这个对象的某个属性是响应式的,那么你可以使用 ref 来创建这个属性。

2.4 ref 的局限性

ref 的一个局限性是,它只能用于原始数据类型(如字符串、数字、布尔值等),不能用于对象或数组。这意味着如果你需要创建一个包含多个属性的响应式对象,你需要使用 reactive 函数而不是 ref

三、使用 reactive

3.1 reactive 的创建方法

在 Vue 3 中,你可以使用 reactive 函数来创建一个响应式对象。reactive 函数可以接受一个初始对象作为参数,并返回一个响应式对象。例如:

import { reactive } from 'vue';  
  
const state = reactive({  
  count: 0,  
  name: 'John',  
});

在这个例子中,我们创建了一个名为 state 的响应式对象,它包含两个属性 countname

3.2 reactive 的使用方法

使用 reactive 的一个关键点是,你可以直接修改它的属性。例如:

state.count++; // 修改 state 的 count 属性  
state.name = 'Jane'; // 修改 state 的 name 属性

你还可以通过 reactive 函数创建一个响应式的方法或计算属性。例如:

const doubleCount = reactive({  
  get() {  
    return this.count * 2;  
  },  
});

在这个例子中,我们创建了一个名为 doubleCount 的响应式方法,它返回 count 的两倍。当你访问 doubleCount 时,它会动态地计算它的值。

3.3 reactive 的适用场景

reactive 函数最适合用于创建包含多个属性的响应式对象。由于 reactive 返回的是一个响应式对象,因此你可以直接修改它的属性,而不需要使用 .value 属性。

reactive 还可以用于创建包含方法或计算属性的响应式对象。你可以在响应式对象中定义方法或计算属性,并在模板中直接调用它们。这种方法在处理复杂的数据逻辑时非常有用。

reactive 也适用于那些需要同时跟踪多个状态的情况。通过使用 reactive,你可以将多个状态组织在一个响应式对象中,并在模板中方便地访问它们。

3.4 reactive 的局限性

虽然 reactive 提供了更广泛的响应式对象功能,但它确实有一些局限性。首先,与 ref 相比,reactive 的性能开销可能更大。因为 reactive 需要跟踪对象中的所有属性变化,而 ref 只需要跟踪一个原始值的变化。在性能敏感的应用程序中,使用 ref 可能是一个更好的选择。

其次,reactive 不支持 .set 方法。这意味着如果你想设置一个响应式对象的属性值,你只能直接赋值。这可能会引发一些不便。另外,如果你需要在响应式对象上添加一些额外的逻辑(例如 getter 或 setter),你可能需要使用 computed 或其他方法来实现,而不是直接在 reactive 中定义。

四、对比 ref 和 reactive

4.1 响应性方面的对比

refreactive 都可以创建响应式对象,但是在响应性方面,它们有一些区别。

使用 ref 创建的响应式引用只会响应原始值的改变。如果你将一个对象或者数组作为 ref 的初始值,那么当这个对象或数组中的某个元素发生改变时,ref 不会响应。只有当整个对象或数组被替换为新的对象或数组时,ref 才会响应。

相比之下,reactive 可以创建包含多个属性的响应式对象。当这些属性发生改变时,reactive 会立即响应并更新相关的组件。此外,reactive 还可以创建响应式的方法和计算属性,这是 ref 不支持的。

ref 更适合用于单个值的响应式引用,而 reactive 更适合用于包含多个属性或方法的响应式对象。

4.2 性能方面的对比

由于 ref 只关注单个原始值的改变,因此它的性能开销相对较小。相比之下,reactive 需要跟踪对象中的所有属性变化,因此它的性能开销可能更大。特别是在处理大量数据或复杂逻辑时,reactive 的性能开销可能会更加明显。

然而,需要注意的是,这种性能差异在很多情况下可能并不显著。对于大多数应用程序来说,refreactive 的性能差异不会对应用程序的整体性能产生太大影响。只有在处理非常大量的数据或进行高频率的更新时,这种性能差异才会变得明显。

因此,在选择使用 refreactive 时,需要根据具体的应用场景和需求进行权衡。如果需要处理大量数据或复杂逻辑,并且需要立即响应用户的输入或状态的改变,那么使用 reactive 可能更合适。如果只需要处理单个值的改变,并且对性能要求较高,那么使用 ref 可能更合适。

4.3 使用场景的对比

ref 更适合用于简单的数据引用,例如单个的数字、字符串或布尔值。当你需要响应这些简单数据的改变时,可以使用 ref。例如,如果你有一个表单,其中包含一些输入字段,你可以使用 ref 来存储和响应每个输入字段的值。

相比之下,reactive 更适合用于复杂的数据结构,例如对象或数组。当你需要同时处理多个属性的改变时,或者当你需要创建包含方法或计算属性的响应式对象时,可以使用 reactive。例如,如果你有一个购物车,其中包含多个商品,每个商品都有自己的数量和价格,你可以使用 reactive 来存储和响应整个购物车。

ref 更适合用于简单的数据引用,而 reactive 更适合用于复杂的数据结构。

4.4 API 使用的对比

ref 的 API 相对简单,只需要调用一次函数即可创建响应式引用。例如:

const count = ref(0);

reactive 需要调用两次函数,先创建一个普通的对象,然后再使用 reactive 包装它。例如:

const state = reactive({ count: 0 });

这意味着 reactive 的 API 使用可能更加繁琐一些。此外,reactive 还提供了更多的功能和选项,例如可以创建响应式的方法和计算属性。但是这也会增加学习的难度和复杂性。

ref 的 API 使用更加简单直接,而 reactive 的功能更加强大但学习难度也相对较大。选择使用哪个功能取决于具体的应用场景和个人需求。

五、总结

Vue 3 的 ref 和 reactive 是创建响应式对象的两种方法。ref 创建响应式引用,只能应用于单个原始值的情况。reactive 创建响应式对象,适用于包含多个属性或方法的复杂数据结构。ref 的 API 简单直接,而 reactive 提供了更多功能和选项。根据具体应用场景和个人需求选择使用哪种方法。

在这里插入图片描述

到这里我的分享就结束了,欢迎到评论区探讨交流!!
💖如果觉得有用的话还请点个赞吧 💖

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1147454.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

私有云:【11】win10安装Agent客户端组件

私有云:【11】win10安装Agent客户端组件 1、配置IP及加入域2、安装Agent客户端组件3、生成win10快照 1、配置IP及加入域 配置ip及dns 修改计算机名且加入域 进行验证 加入成功 将cloudadmin用户加入管理员组 输入cloudadmin户名密码验证 2、安装Agent客户端组件 …

第八周实验记录

10月20日-10月22日工作: 复现S-NeRF代码,按照github的步骤进行,首先使用一个RTX3090显卡, 在下图步骤中:运行最后一步 python scripts/run.py 出现问题 继续使用两张RTX3090显卡尝试,依旧在这一步出现问…

如何防范AI等技术带来的诈骗风险?从技术、法律、教育等多方面入手

文章目录 前言什么是AI诈骗案例案例一案例二 AI诈骗的特点如何预防和应对AI诈骗建议后记 前言 互联网是一把双刃剑,这是我们常说的一个问题。 随着人工智能技术的快速发展,AI诈骗成为当今社会面临的新兴威胁。不法分子利用人工智能技术,以更…

趣互联app一分购地推网推拉新上线平台啦,简单流程

趣互联一手渠道 “聚量推客” 上架趣互联啦,适合地推和网推进行推广,社群私域也可以推广,比较简单。 如果你在做拉新推广 地推或者网推都可以通过“聚量推客”获取最大收益

SDXL简介

SDXL是一个文生图模型。相比旧版的stable diffusion,SDXL主要的不同有三点: 有一个refinement model,通过image-to-image的方式来提高视觉保真度。使用了两个text encoder,OpenCLIP ViT-bigG和CLIP ViT-L。增加了图片大小和长宽比…

解决:getReader() has already been called for this request

问题现场: 原因: HttpServletRequest 的 getInputStream() 和 getReader() 都只能读取一次。 因为 我们使用RequestBody 注解,读取body参数;而 又 写了拦截器,也需要将post请求,body数据拿出来。 由于RequestBody 也是…

JVM第二十三讲:Java动态调试技术原理

Java动态调试技术原理 本文是JVM第二十三讲,Java动态调试技术原理。转载自 美团技术团队胡健的Java 动态调试技术原理及实践,通过学习java agent方式进行动态调试,了解目前很多大厂开源的一些基于此的调试工具 (例如来自阿里开源的Arthas)。 …

工作组与域

目录 内网环境 内网环境分类 工作组 域 域的组成 域中的信任关系 父域与子域 域的结构 林中信任关系特点 域中的域名 活动目录(AD) 域中活动目录下的账号登录域中计算机过程 组织单位(OU) 组策略(GPO&am…

【C++】priority_queue模拟实现+仿函数+反向迭代器

priority_queue模拟实现仿函数反向迭代器 1.priority_quyue1.1priority_queue的使用1.2priority_queue模拟实现1.2.1无参构造一段区间构造1.2.2push1.2.3pop1.2.4empty1.2.5size1.2.6top 2.仿函数2.1什么是仿函数2.2增加仿函数的priority_queue模拟实现完整代码 3.反向迭代器3.…

私有云:【13】用户授权及访问

私有云:【13】用户授权及访问 1、AD域中为云桌面用户2、用户授权及访问3、本地物理机访问云桌面 1、AD域中为云桌面用户 创建用户 密码永不过期,自行选择设置 完成 2、用户授权及访问 添加授权 添加 - 搜索名称【刚创建的dev_01用户】 选择dev_01用户…

MinIO 高性能分布式存储最新版单机与分布式部署

文章目录 一、概述二、单机部署(单主机,多硬盘模式)1)磁盘初始化2)创建服务启动用户并设置磁盘属主3)下载 minio 安装包4)修改配置5)配置 systemctl 启动6)客户端工具 mc…

拜耳阵列(Bayer Pattern)和解马赛克简介

拜尔阵列 典型的图像传感器(例如我们在数码相机中使用的图像传感器,主要有CCD, CMOS)由许多单独的光电传感器组成,所有这些传感器都会捕获光线。这些光电传感器本身能够捕获光的强度,但不能捕获其波长(颜色…

BUUCTF_练[PASECA2019]honey_shop

[PASECA2019]honey_shop 文章目录 [PASECA2019]honey_shop掌握知识解题思路关键paylaod 掌握知识 页面信息收集,根据下载的图片找到下载链接,确定url的参数进行利用;session字段的解密和解密,session伪造的考点。 解题思路 打开…

科技驱动教育!将名师智慧资产固定在系统中

文章目录 每日一句正能量前言未来教育教育趋势一、在线教育:打破时间和空间的限制二、混合式学习:结合线上和线下的优势三、项目式学习:以问题为导向,以项目为载体 科技驱动教育模式在线教育人工智能教育虚拟现实/增强现实教育游戏…

电子器件 二极管

二极管主要是利用其单向导电性,通常用于整流、检波、限幅、元件保护等,在数字电路中常作为开关元件。 一、常用二极管类型 高频二极管 1N4148 等 肖特基二极管 SS14 SS34 SS54 等 快恢复二极管(FRD) 可以用快恢复二极管代替肖特…

Redis 原理缓存过期、一致性hash、雪崩、穿透、并发、布隆、缓存更新策略、缓存数据库一致性

redis过期策略 redis的过期策略可以通过配置文件进行配置 一、定期删除 redis会把设置了过期时间的key放在单独的字典中,定时遍历来删除到期的key。 1).每100ms从过期字典中 随机挑选20个,把其中过期的key删除; 2).…

TELUS Ventures(泰勒斯)

TELUS Ventures(泰勒斯)高峰论坛于2023年10月28日在南京第5站正式开幕。该论坛是由泰勒斯风险投资公司主办的一项重要活动,旨在促进创新和创业精神的发展 。 这次高峰论坛将汇集来自全球各地的创业者、投资者和行业专家,共同探讨…

51单片机-点阵屏led

代码配置 这样就能选择每一列哪个亮了 进行位选,段清零,这样就不会影响多列同时了 实现动画 1、使用文字摸提取文件,提取图案的16进制表示数组 offest作为偏移量,count作为计时。count10,偏移量加1,就相当于得到下一…