Vue 3中ref和reactive的区别

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

    • 摘要:
    • 引言:
    • 正文:
      • 1️⃣ ref
      • 2️⃣ reactive
      • 3️⃣ ref与reactive对比
    • 总结:
    • 参考资料:

摘要:

本文将详细介绍Vue 3中ref和reactive的区别,探讨它们的使用场景和优缺点。

引言:

在Vue 3中,响应式系统是其核心特性之一。Vue 3提供了两种方法来实现响应式数据:ref和reactive。本文将对比分析这两种方法,帮助大家更好地理解它们的特点和适用场景。

正文:

1️⃣ ref

  • 定义:ref用于创建一个响应式的数据对象。它通常用于创建基本数据类型的响应式数据。
  • 使用方法:通过调用ref函数并传入一个初始值来创建一个响应式数据对象。在模板中访问时,ref对象会自动解构,无需通过.value属性访问。
  • 特点:ref对象在模板中自动解构,方便使用;同时,ref也可以用于创建复杂对象的响应式数据。

以下是一些简单的 ref 代码案例:

  1. 创建一个 ref:
const count = ref(0);
  1. 通过 ref 访问 DOM 元素:
const input = ref(null);
console.log(input.value); // 输出:null
  1. 在模板中使用 ref:
<template><div><input ref="input" v-model="count" /><button @click="handleClick">Click me</button></div>
</template><script>
export default {setup() {const count = ref(0);function handleClick() {console.log(count.value); // 输出:1}return {count,handleClick,};},
};
</script>
  1. 在生命周期钩子中使用 ref:
import { ref, onMounted } from 'vue';export default {setup() {const count = ref(0);function handleClick() {count.value++;}onMounted(() => {console.log(count.value); // 输出:0});return {count,handleClick,};},
};

这些案例展示了 ref 在 Vue.js 中的基本用法。ref 是 Vue.js 3.x 中一个新的响应式系统,它允许我们更灵活地操作 DOM 和管理状态。

2️⃣ reactive

  • 定义:reactive用于创建一个响应式的对象。它通常用于创建复杂对象的响应式数据。
  • 使用方法:通过调用reactive函数并传入一个对象来创建一个响应式数据对象。在模板中访问时,需要通过对象属性访问。
  • 特点:reactive适用于创建复杂对象的响应式数据;同时,reactive对象在模板中不会自动解构,需要通过对象属性访问。

以下是一些简单的 reactive 代码案例:

  1. 创建一个 reactive 对象:
const state = reactive({count: 0,message: 'Hello, Vue!'
});
  1. 修改 reactive 对象:
state.count++; // 自动触发视图更新
state.message = 'Hello, reactive!'; // 自动触发视图更新
  1. 在模板中使用 reactive 对象:
<template><div><p>Count: {{ state.count }}</p><p>Message: {{ state.message }}</p><button @click="handleClick">Click me</button></div>
</template><script>
export default {setup() {const state = reactive({count: 0,message: 'Hello, Vue!'});function handleClick() {state.count++;state.message = 'Hello, reactive!';}return {state,handleClick};},
};
</script>
  1. 在生命周期钩子中使用 reactive 对象:
import { reactive, onMounted } from 'vue';export default {setup() {const state = reactive({count: 0,message: 'Hello, Vue!'});function handleClick() {state.count++;state.message = 'Hello, reactive!';}onMounted(() => {console.log(state.count); // 输出:0console.log(state.message); // 输出:Hello, Vue!});return {state,handleClick};},
};

这些案例展示了 reactive 在 Vue.js 中的基本用法。reactive 是 Vue.js 3.x 中一个新的响应式系统,它允许我们更灵活地操作 DOM 和管理状态。

3️⃣ ref与reactive对比

  • 使用场景:ref适用于创建基本数据类型和复杂对象的响应式数据;reactive适用于创建复杂对象的响应式数据。
  • 自动解构:ref在模板中自动解构,方便使用;reactive不会自动解构,需要通过对象属性访问。
  • 适用性:ref可以用于创建基本数据类型和复杂对象的响应式数据,更加灵活;reactive适用于创建复杂对象的响应式数据,更加专注。

以下是 ref 和 reactive 的对比表格:

特性refreactive
定义用于创建一个响应式的数据对象,通常用于基本数据类型用于创建一个响应式的对象,通常用于复杂对象
使用方法调用ref函数并传入初始值调用reactive函数并传入对象
模板访问自动解构,无需.value不自动解构,需通过对象属性访问
适用场景基本数据类型和复杂对象复杂对象
自动解构在模板中自动解构不自动解构
适用性灵活,可用于多种数据类型专注,适用于复杂对象
用途创建基本数据类型的响应式数据,或作为复杂对象属性的响应式代理创建整个复杂对象的响应式数据

从表格中可以看出,ref 和 reactive 都有各自的优缺点。在实际项目中,可以根据具体需求和团队技术栈选择合适的方案。

总结:

ref和reactive是Vue 3中实现响应式数据的两种方法,各有优缺点。了解它们的区别,有助于我们在实际项目中根据需求选择合适的方法。

参考资料:

  • Vue Team. The Introduction to Vue 3[EB/OL]. https://v3.vuejs.org/guide/reactivity.html#ref-and-reactive.

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

碳课堂|什么是碳资产?企业如何进行碳资产管理?

碳资产是绿色资产的重要类别&#xff0c;在全球气候变化日益严峻的背景下备受关注。在“双碳”目标下&#xff0c;碳资产管理是企业层面实现碳减排目标和低碳转型的关键。 一、什么是碳资产&#xff1f; 碳资产是以碳减排为基础的资产&#xff0c;是企业为了积极应对气候变化&…

就业班 第二阶段 2401--3.25 day5 mycat读写分离

[TOC] 启动并更改临时密码 [rootmysql1~]# systemctl start mysqld && passwdgrep password /var/log/mysqld.log | awk END{ print $NF} && mysqladmin -p"$passwd" password Qwer123..; MyCAT读写分离 Mycat 是一个开源的数据库系统&#xff0c;但…

遇到了问题,Firepower 2140配置带外IP时报错 commit-buffer failed

onsite we have a cisco firepower 2140 device which run ASA as we try to modify the 2140 OOB mgmt ip by CLI, we got an error why ? 经过查询发现&#xff0c;需要进入ASA里面打上以下这条命令&#xff0c;并重启ASA 1 修改模式并重启 ciscoasa# configure termina…

idea使用git笔记

1.创建分支和切换分支 创建分支 切换分支 2.把新创建的分支提交到远程服务器上&#xff08;注&#xff1a;如果没有提交的&#xff0c;随便找个文件修改再提交&#xff09; (1)切换到要提交的分支&#xff0c;add (2)commit (3)push 3.在自己分支修改代码及提交到自己的远…

STM32收发HEX数据包

在实际应用中&#xff0c;STM32的串口通信都是以数据包格式进行收发&#xff0c;这个数据包一般都包含包头和包尾&#xff0c;表示一个数据包。源代码在文末给出 数据包格式&#xff1a; 固定长度&#xff0c;含包头包尾 可变包长&#xff0c;含包头包尾 问题1&#xff1a;当…

C语言例4-15:从键盘输入一个整数,求其绝对值并输出。

代码如下&#xff1a; //从键盘输入一个整数&#xff0c;求其绝对值并输出。 #include<stdio.h> int main(void) {int n;printf("输出一个整数&#xff1a; \n");scanf("%d",&n); //从键盘输入一个整数保存至变量nif(n<0) //…

C#打印50*30条码标签

示例图&#xff1a; 源码下载地址&#xff1a;https://download.csdn.net/download/tiegenZ/89035407?spm1001.2014.3001.5503

混合云构建-使用 Azure ExpressRoute 建立从本地到 Azure 虚拟网络的专用连接

如果有大量业务数据需要在本地数据中心和azure私有网络进行传输&#xff0c;同时保证带宽和时延的情况需要使用 ExpressRoute 设置从本地网络到 Azure 中的虚拟网络的专用连接。以下是实操步骤供参考&#xff1a; 一、创建和预配 ExpressRoute 线路 登录 Azure 门户。 在页面顶…

comfyui 代码结构分析

comfyui的服务器端是用aiohtttp写的&#xff0c;webui是fastapi直接构建的&#xff0c;但是其实comfyui的这种设计思路是很好的&#xff0c;也许我们不需要在后端起一个复杂的前台&#xff0c;但是可以借助json结构化pipeline&#xff0c;然后利用node节点流把整个流程重新映射…

DaisyDisk for mac 苹果电脑磁盘清理工具

DaisyDisk for Mac是一款直观易用的磁盘空间分析工具&#xff0c;专为Mac用户设计&#xff0c;旨在帮助他们快速识别和管理磁盘上的文件与文件夹&#xff0c;从而释放存储空间。 软件下载&#xff1a;DaisyDisk for mac 激活版 DaisyDisk采用独特的可视化界面&#xff0c;将磁盘…

2024年目前阿里云服务器一个月收费价格表多少钱?

阿里云服务器一个月多少钱&#xff1f;最便宜5元1个月。阿里云轻量应用服务器2核2G3M配置61元一年&#xff0c;折合5元一个月&#xff0c;2核4G服务器30元3个月&#xff0c;2核2G3M带宽服务器99元12个月&#xff0c;轻量应用服务器2核4G4M带宽165元12个月&#xff0c;4核16G服务…

基于OneAPI+ChatGLM3-6B+FastGPT搭建LLM大语言模型知识库问答系统

搭建大语言模型知识库问答系统 部署OneAPI部署一个LLM模型部署嵌入模型部署FastGPT新建FastGPT对话应用新建 FastGPT 知识库应用 部署OneAPI 拉取镜像 docker pull justsong/one-api创建挂载目录 mkdir -p /usr/local/docker/oneapi启动容器 docker run --name one-api -d …

解决 Xshell 等工具连接虚拟机失败

这里以 Xshell 等工具连接 Linux 虚拟机为例 对于我们使用 Xshell 等工具连接虚拟机失败&#xff0c;我们可以从以下的几个方面进行检查和解决 检查连接工具中的连接会话配置是否正确 对于这方面&#xff0c;我们要检查连接工具中连接会话配置的虚拟机 IP 地址和端口号是否正…

【数据库管理操作】Mysql 创建学生数据库及对数据表进行修改

MySQL 创建学生成绩数据库 1.创建数据库 create database studentscore;创建完成之后&#xff0c;如果需要使用该数据&#xff0c;使用use命令 use studentscore;创建表前查看当前数据库中包含的表 show tables; 2.创建bclass表 create table bclass( class_id char(8) …

语音情感分类(1)简单可运行项目(附代码)

1.目标 题主最开始是想做一个音乐情感分类的模型&#xff0c;但是查阅相关文献发现这个范围太大了&#xff0c;音乐情感特征包括文本&#xff0c;音频&#xff0c;甚至有的还有画面&#xff0c;是一个多模态的范畴。所以退而求其次&#xff0c;找了一个接近的语音情感分类来学…

Sentry(Android)源码解析

本文字数&#xff1a;16030字 预计阅读时间&#xff1a;40分钟 01 前言 Sentry是一个日志记录、错误上报、性能监控的开源框架&#xff0c;支持众多平台&#xff1a; 其使用方式在本文不进行说明了&#xff0c;大家可参照官方文档&#xff1a;https://docs.sentry.io/platforms…

Jenkins--在Linux上使用Docker安装

一、Jenkins 简介 Jenkins是一个流行的开源自动化服务器&#xff0c;用于持续集成和持续交付&#xff08;CI/CD&#xff09;。Jenkins的核心功能主要包括以下几点&#xff1a; 持续集成&#xff1a;Jenkins可以监控版本控制系统&#xff08;如Git、SVN&#xff09;中的代码变…

RAG进阶笔记:RAG进阶

1 查询/索引部分 1.1 层次索引 创建两个索引——一个由摘要组成&#xff0c;另一个由文档块组成分两步进行搜索&#xff1a;首先通过摘要过滤出相关文档&#xff0c;接着只在这个相关群体内进行搜索 1.2 假设性问题 让LLM为每个块生成一个假设性问题&#xff0c;并将这些问…

U盘未格式化,数据恢复攻略大揭秘

U盘遭遇未格式化困境&#xff0c;数据安全岌岌可危 在日常的工作和生活中&#xff0c;U盘以其便携、容量大的特性成为了我们不可或缺的存储工具。然而&#xff0c;有时我们会遇到这样一个棘手的问题&#xff1a;当我们将U盘插入电脑时&#xff0c;却收到了“未格式化”的提示。…

畅捷通T+ Ufida.T.DI.UIP.RRA.RRATableController 远程命令执行漏洞

一、漏洞信息 漏洞名称&#xff1a;畅捷通T Ufida.T.DI.UIP.RRA.RRATableController 远程命令执行漏洞 漏洞类别&#xff1a;远程命令执行漏洞 风险等级&#xff1a;高危 二、漏洞描述 畅捷通TPlus适用于异地多组织、多机构对企业财务汇总的管理需求&#xff1b;全面支持企…