当前位置: 首页 > news >正文

ref() 和 reactive() 区别

ref() 和 reactive() 都是 Vue 3 中用于创建响应式数据的方法,但它们之间存在一些关键差异。

首先,ref() 用于创建响应式的标量值,比如数字、字符串、布尔值等基本数据类型,以及对象和数组等复杂数据类型。当你使用 ref() 时,你会得到一个带有 .value 属性的对象,这个对象是响应式的。例如:

const count = ref(0)

这里的 count 是一个响应式的 ref 对象,你可以通过 count.value 来访问和修改它的值。

而 reactive() 用于创建响应式的对象和数组。它接受一个对象或数组,并返回一个响应式的代理对象。例如:

const state = reactive({ count: 0 })

这里的 state 是一个响应式的对象,你可以直接访问和修改它的属性,如 state.count

所以,主要的区别在于:

  1. 用途

    • ref():适用于各种数据类型,包括基本类型和引用类型。

    • reactive():仅适用于对象和数组。

  2. 访问和修改

    • ref():通过 .value 属性访问和修改值。

    • reactive():直接访问和修改对象的属性。

  3. 嵌套数据的响应式

    • ref():如果内部包含对象或数组,需要递归地使用 ref() 或 reactive()

    • reactive():自动处理嵌套对象和数组的响应式。

  4. 性能

    • reactive():对于大量数据的对象,性能可能优于使用多个 ref()

总之,根据你的数据类型和需求,你可以选择使用 ref() 或 reactive() 来创建响应式数据。对于基本类型和单个值,ref() 是一个好选择;对于复杂的对象和数组,reactive() 更为适合。

示例

使用 ref()

import { ref } from 'vue'

export default {

setup() {

const count = ref(0)function increment() {count.value++}return {count,increment}

}

}

使用 reactive()

import { reactive } from 'vue'

export default {

setup() {

const state = reactive({ count: 0 })function increment() {state.count++}return {count: state.count,increment}

}

}

相关文章:

ref() 和 reactive() 区别

ref() 和 reactive() 都是 Vue 3 中用于创建响应式数据的方法,但它们之间存在一些关键差异。 首先,ref() 用于创建响应式的标量值,比如数字、字符串、布尔值等基本数据类型,以及对象和数组等复杂数据类型。当你使用 ref() 时&…...

深度学习与计算机视觉 (博士)

文章目录 零、计算机视觉概述一、深度学习相关概念1.学习率η2.batchsize和epoch3.端到端(End-to-End)、序列到序列(Seq-to-Seq)4.消融实验5.学习方式6.监督学习的方式(1)有监督学习(2)强监督学习(3)弱监督学习(4)半监督学习(5)自监督学习(6)无监督学习(7)总结:不同…...

Sprint Boot教程之五十:Spring Boot JpaRepository 示例

Spring Boot JpaRepository 示例 Spring Boot建立在 Spring 之上,包含 Spring 的所有功能。由于其快速的生产就绪环境,使开发人员能够直接专注于逻辑,而不必费力配置和设置,因此如今它正成为开发人员的最爱。Spring Boot 是一个基…...

NaVILA:用于足式机器人导航的VLA模型

论文地址:https://navila-bot.github.io/static/navila_paper.pdf 项目地址:https://navila-bot.github.io/ 本文提出了一种名为NaVILA的机器人导航模型,旨在解决视觉语言导航问题,并允许机器人在更具挑战性和杂乱的场景中进行导…...

大语言模型提示技巧(七)-扩展

扩展是将较短的文本,例如一组提示或主题列表,输入到大型语言模型中,让模型生成更长的文本。我们可以利用这个特性让大语言模型生成基于某个主题的电子邮件或小论文。通过这种方式使用大语言模型,可以为工作与生活提供诸多便利&…...

基类指针指向派生类对象,基类指针的首地址永远指向子类从基类继承的基类首地址

文章目录 基类指针指向派生类对象&#xff0c;基类指针的首地址永远指向子类从基类继承的基类起始地址。代码代码2 基类指针指向派生类对象&#xff0c;基类指针的首地址永远指向子类从基类继承的基类起始地址。 代码 #include <iostream> using namespace std;class b…...

25年01月HarmonyOS应用基础认证最新题库

判断题 “一次开发&#xff0c;多端部署”指的是一个工程&#xff0c;一次开发上架&#xff0c;多端按需部署。为了实现这一目的&#xff0c;HarmonyOS提供了多端开发环境&#xff0c;多端开发能力以及多端分发机制。 答案&#xff1a;正确 《鸿蒙生态应用开发白皮书》全面阐释…...

wps宏js接入AI功能和接入翻译功能

wps的js越来越强大了&#xff0c;很实用的功能&#xff0c;爱了 表格wps js接入AI 表格wps js接入翻译功能&#xff0c;自定义翻译语言和目标语言...

【Logstash03】企业级日志分析系统ELK之Logstash 过滤 Filter 插件

Logstash 过滤 Filter 插件 数据从源传输到存储库的过程中&#xff0c;Logstash 过滤器能够解析各个事件&#xff0c;识别已命名的字段以构建结构&#xff0c; 并将它们转换成通用格式&#xff0c;以便进行更强大的分析和实现商业价值。 Logstash 能够动态地转换和解析数据&a…...

深度学习:Java DL4J基于RNN构建智能停车管理模型

### 深度学习&#xff1a;Java DL4J基于RNN构建智能停车管理模型 #### 引言 随着城市化进程的加速&#xff0c;停车问题日益成为城市管理的难点和痛点。传统的停车场管理方式效率低下&#xff0c;导致停车场资源无法得到充分利用&#xff0c;车主停车体验差。为了解决这些痛点…...

花生好坏缺陷识别数据集,7262张图片,支持yolo,coco json,pasical voc xml格式的标注,识别准确率在95.7%

花生好坏缺陷识别数据集,7262张图片&#xff0c;支持yolo&#xff0c;coco json&#xff0c;pasical voc xml格式的标注&#xff0c;识别准确率在95.7% 数据集分割 训练组87&#xff05; 6353图片 有效集8% 606图片 测试集4% 303图片 预处理 自动定…...

2025年:AI化浪潮中的社会变迁与商业革新

随着人工智能(AI)技术的迅猛发展,2025年将成为一个转折点。这一年,AI不仅将深入到日常生活和商业运营的各个角落,还将引发一系列深刻的社会、经济和技术变革。以下是对未来一年可能出现的“AI化”现象的预测与展望。 AI进入主流文化的标志 超级碗广告:在2025年的超级碗上…...

filebeat、kafka

elk的架构 es数据库&#xff1a;非关系型数据库&#xff0c;json格式 logstash&#xff1a;收集日志 kibana&#xff1a;图形化的工具 ↓ 以上三种结合起来即为日志收集系统 filebeat 作用&#xff1a;filebeat是一款轻量级的日志收集工具&#xff0c;不依赖java环境&…...

js单例模式

保证一个类只有一个实例,并提供一个访问它的全局访问点 实现 静态方法实现 class SingleTon{//全局的访问点static getInstance(){// 保证一个类只有一个实例if(!this.instance){this.instancenew SingleTon()}return this.instance}}let aSingleTon.getInstance()let bSing…...

【设计模式】装饰器与代理模式的对比

文章目录 装饰器模式&#xff08;Decorator Pattern&#xff09;代理模式&#xff08;Proxy Pattern&#xff09;两者之间的区别 装饰器模式&#xff08;Decorator Pattern&#xff09; 装饰器模式是一种结构型设计模式&#xff0c;它允许你动态地将责任附加到对象上&#xff…...

Proteus-8086调试汇编格式的一点心得

这阵子开始做汇编的微机实验&#xff08;微机原理与接口技术题解及实验指导&#xff0c;吴宁版本13章&#xff09;&#xff0c;中间出了挺多问题&#xff0c;解决后记录下。 先上电路图 用子电路来仿真发现仿真的时候子电路这块根本没有高低电平输出&#xff0c;只好把子电路拿…...

什么是Kafka?有什么主要用途?

大家好&#xff0c;我是锋哥。今天分享关于【什么是Kafka&#xff1f;有什么主要用途&#xff1f;】面试题。希望对大家有帮助&#xff1b; 什么是Kafka&#xff1f;有什么主要用途&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Kafka 是一个分布式流…...

SpringBoot插件

SpringBoot的插件机制是其强大灵活性的重要体现&#xff0c;它允许开发人员将应用程序的不同功能模块打包为独立的插件&#xff0c;并可以动态地加载和卸载这些插件。以下是对SpringBoot插件机制的详细解析&#xff1a; 一、插件机制的概念 插件机制是一种软件开发方法&#…...

UE 5.3 C++ 管理POI 如何对WidgetComponent 屏幕模式进行点击

一.首先对很多对 World 模式下的点击&#xff0c;选择接受 硬件输入&#xff0c;就可以实现点击。 二。Screen 模式下&#xff0c;的POI。如果想要点击&#xff0c; 设置好 Layers。 在Widget下&#xff0c;加个Button。 即使上面有其他&#xff0c;但也能点击到。 。 如果相…...

Nginx实现接口复制

目录 1、前言 2、接口流复制 2.1、方式一&#xff1a;使用mirror指令 2.1.1、nginx配置 2.1.2、配置说明 2.1.3、测试结果 2.1.4、注意事项 2.2、方式二&#xff1a;使用Lua 2.2.1、安装Openresty 2.2.2、nginx配置 2.2.3、配置说明 2.2.4、测试结果 3、小结 1、前…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...