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

vue3中 reactive和ref的区别

在Vue 3中,reactive和ref都是用于响应式数据的API。它们的主要区别在于使用方式和返回值类型。

reactive:

reactive函数用于将一个对象转换为响应式对象。它接收一个普通的JavaScript对象,并返回一个被代理的响应式对象。这意味着当响应式对象的属性发生更改时,Vue会自动检测到并重新渲染相关的组件。

import { reactive } from 'vue';const state = reactive({count: 0,
});console.log(state.count); // 0
state.count = 5;
console.log(state.count); // 5

在上面的例子中,reactive函数将一个普通的对象state转换为响应式对象。我们可以直接访问响应式对象的属性,通过修改属性的值,Vue会自动更新相关的视图。

ref:

ref函数用于将一个值转换为响应式对象。它接收一个普通的JavaScript值,并返回一个包装的响应式对象,其值可以通过.value进行访问和修改。

import { ref } from 'vue';const count = ref(0);
console.log(count.value); // 0
count.value = 5;
console.log(count.value); // 5

在上面的例子中,ref函数将一个数字0转换为响应式对象。我们可以通过.value来访问和修改响应式对象的值。

需要注意的是,在模板中使用ref时,Vue会自动解包,你可以直接在模板中使用ref对象,无需通过.value属性访问其值。

总结:

使用reactive可以创建一个响应式的对象,访问和修改属性时不需要特殊处理。

使用ref可以创建一个响应式的包装对象,访问和修改值时需要使用.value属性。

通常情况下,如果你需要创建一个包装的响应式对象,用于存储单个值,可以使用ref。

如果你需要创建一个包含多个属性的响应式对象,可以使用reactive。

reactive() 的局限性

reactive() API 有两条限制:

仅对对象类型有效(对象、数组和 Map、Set 这样的集合类型),而对 string、number 和 boolean 这样的 原始类型无效。

因为 Vue的响应式系统是通过属性访问进行追踪的,因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象,因为这将导致对初始引用的响应性连接丢失:

reactive对比ref

从定义数据角度对比:

ref用来定义: 基本数据类型

reactive用来定义: 对象(或数组)类型数据

备注: ref也可以用来定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象从原理角度对比

ref通过Object.defineProperty()的get和set来实现响应式(数据劫持)

reactive通过Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据

从使用角度对比:

ref定义数据:操作数据需要 .value ,读取数据时模板中直接读取不需要 .value

reactive 定义的数据: 操作数据和读取数据均不需要 .value

相关文章:

vue3中 reactive和ref的区别

在Vue 3中,reactive和ref都是用于响应式数据的API。它们的主要区别在于使用方式和返回值类型。 reactive: reactive函数用于将一个对象转换为响应式对象。它接收一个普通的JavaScript对象,并返回一个被代理的响应式对象。这意味着当响应式对…...

docker的安装部署nginx和mysql

小白自己整理,如有错误请指示! 自我理解:docker就是把应用程序所用的依赖程序,函数库等相关文件打包成镜像文件,类似系统光盘,然后可以在任意电脑上安装使用(方便运维人员部署程序)…...

测试C#调用Aplayer播放视频(1:加载Aplayer控件)

微信公众号“Dotnet跨平台”的文章《开源精品,使用 C# 开发的 KTV 点歌项目》中使用了迅雷开源APlayer播放引擎。最近在学习有哪些能拿来播放视频的组件或控件,于是准备试试,根据文章中的介绍,在迅雷APlayer播放引擎网站中下载了A…...

二叉树的遍历+二叉树的基本操作

文章目录 二叉树的操作一、 二叉树的存储1.二叉树的存储结构 二、 二叉树的基本操作1.前置创建一棵二叉树:1. 定义结点 2.简单的创建二叉树 2.二叉数的遍历1.前序遍历2.中序遍历3.后序遍历4.层序遍历 3.二叉树的操作1.获取树中节点的个数2.获取叶子节点的个数3.获取…...

Go 语言gin框架的web

节省时间与精力,更高效地打造稳定可靠的Web项目:基于Go语言和Gin框架的完善Web项目骨架。无需从零开始,直接利用这个骨架,快速搭建一个功能齐全、性能优异的Web应用。充分发挥Go语言和Gin框架的优势,轻松处理高并发、大…...

Docker底层原理:Cgroup V2的使用

文章目录 检查 cgroup2 文件系统是否已加载检查系统是否已挂载 cgroup2 文件系统创建 cgroup2 层次结构查看 cgroup2 开启的资源控制类型启用 cgroup2 资源控制设置 cgroup2 资源限制加入进程到 cgroup2 检查 cgroup2 文件系统是否已加载 cat /proc/filesystems | grep cgroup…...

历年上午真题笔记(2014年)

解析:A 网络设计的三层模型 : 接入层:Layer 2 Switching,最终用户被许可接入网络的点,用户通过接入层可以访问网络设备。 汇聚层:Layer2/3 Switching,访问层设备的汇聚点,负责汇接配线单元,利用二、三层技术实现工作组分段及网络故障的隔离,以免对核心层网络设备造…...

数据库软考知识

分布式数据库透明性 封锁 加上共享锁之后只能加共享锁,加上排他锁之后,啥锁都不能加。 分布式数据库特性 伪传递定理 SQL函数定义,有点冷 来了奥,更冷 存储过程 很重要,下午第二大题也是数据库...

学习笔记|配对样本均数T检验|SPSS常用的快捷键|规范表达|《小白爱上SPSS》课程:SPSS第六讲 | 配对样本均数T检验

目录 学习目的软件版本原始文档配对样本均数T检验一、实战案例二、案例解析三、统计策略四、SPSS操作1、正态性检验2、配对样本T检验 五、结果解读六、规范报告1、规范表格2、规范文字 划重点Tips:SPSS常用的快捷键 学习目的 SPSS第六讲 | 配对样本均数T检验 软件版本 IBM S…...

python内置模块smtplib、email 发送电子邮件

一、简介 smtplib 是 Python 的标准库之一,用于发送电子邮件。它提供了一个简单的接口来连接到 SMTP(Simple Mail Transfer Protocol)服务器,并通过该服务器发送电子邮件。 email 是 Python 的标准库之一,用于处理电子…...

Qt使用QWebEngineView一些记录

1.关闭软件警告: Release of profile requested but WebEnginePage still not deleted. Expect troubles! 原因,系统退出关闭view,没有释放page。 解决办法:手动释放page 顺便把view也释放了。 Widget::~Widget() {updateIni…...

【2023.10.30练习】C语言-判断等式成立

计算机能力挑战初赛2020.20题 题目描述&#xff1a; 输入正整数A、B、C(0<A,B,C<10000),若用、-、*、/、%之一组成等式(即ABC&#xff0c;是上述运算符之一&#xff0c;)&#xff0c;则输出“YES”&#xff0c;否则输出“NO”&#xff1b; 输入&#xff1a; 第一行输入…...

Wpf 使用 Prism 实战开发Day03

一.实现左侧菜单绑定 效果图: 1.首先需要在项目中创建 mvvm 的架构模式 创建 Models &#xff0c;放置实体类。 实体类需要继承自Prism 框架的 BindableBase&#xff0c;目的是让实体类支持数据的动态变更! 例如: 系统导航菜单实体类 / <summary>/// 系统导航菜单实体类…...

JavaEE-cookie和session

本部分内容包括 cookie基本概念&#xff0c;sendcookies和getcookies代码&#xff1b; session基本概念&#xff0c;session实现登陆界面&#xff1b; 上述过程中涉及的代码如下&#xff1a; 1 import javax.servlet.ServletException; import javax.servlet.annotation.WebSe…...

Java设计模式之命令模式

目录 定义 结构 案例 优点 缺点 使用场景 JDK源码解析 Thread中start与run方法的区别 定义 将一个请求封装为一个对象&#xff0c;使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通&#xff0c;这样方便将命令对象进行存储、传递、调用、增…...

记录一段帮朋友写的代码,使用牛顿-拉夫逊方法解方程

要求 已知公式&#xff1a; t G A B F r B r 2 2 F A 2 B G A F ln ⁡ ( r − A ) C o n s t t\frac{GAB}{F}r\frac{Br^2}{2F}\frac{A^2BGA}{F}\ln (r-A)Const tFGAB​r2FBr2​FA2BGA​ln(r−A)Const 其中 t 的值为0-1000&#xff0c;每间隔25取一次值A2.12941E-10B0.…...

滑动窗口限流算法实现一

固定算法 原理&#xff1a;固定算法是将时间线分隔成固定大小的时间窗口&#xff0c;每个窗口都会有个计数器&#xff0c;用来记录窗口时间范围内的请求总数&#xff0c;如果窗口的请求总数达到最大限定值&#xff0c;会认定流量超限。比如将窗口大小设为1分钟&#xff0c;每分…...

简单明了!网关Gateway路由配置filters实现路径重写及对应正则表达式的解析

问题背景&#xff1a; 前端需要发送一个这样的请求&#xff0c;但出现404 首先解析请求的变化&#xff1a; http://www.51xuecheng.cn/api/checkcode/pic 1.请求先打在nginx&#xff0c;www.51xuecheng.cn/api/checkcode/pic部分匹配到了之后会转发给网关进行处理变成localho…...

EMQX内置Web管理控制台-Dashboard

一、Dashboard概述 EMQX Dashboard官网文档&#xff1a;https://docs.emqx.com/zh/enterprise/v5.1/dashboard/introduction.html 1、简介 EMQX 为用户提供了一个功能强大的内置管理控制台&#xff0c;即 EMQX Dashboard。通过这个控制台的 Web 界面&#xff0c;用户可以轻松监…...

计算机网络重点概念整理-第四章 网络层【期末复习|考研复习】

计算机网络复习系列文章传送门&#xff1a; 第一章 计算机网络概述 第二章 物理层 第三章 数据链路层 第四章 网络层 第五章 传输层 第六章 应用层 第七章 网络安全 计算机网络整理-简称&缩写 文章目录 前言四、网络层4.1 网络层功能4.1.1 电路交换、报文交换与分组交换4.1…...

别再踩坑了!手把手教你搞定vllm、nccl、cuda和python的版本匹配(附版本对照表)

深度学习环境配置避坑指南&#xff1a;vLLM与CUDA生态的版本兼容性实战 在部署大型语言模型推理服务时&#xff0c;vLLM因其高效的内存管理和推理优化成为热门选择。但许多开发者第一次接触vLLM时&#xff0c;往往会被复杂的依赖关系搞得焦头烂额——NCCL版本不匹配、CUDA驱动…...

家庭实验室:树莓派控制OpenClaw调用远程Qwen3-32B

家庭实验室&#xff1a;树莓派控制OpenClaw调用远程Qwen3-32B 1. 为什么选择树莓派OpenClaw组合 去年冬天&#xff0c;我在整理家庭实验室设备时发现一个闲置的树莓派4B。这台信用卡大小的电脑曾经用来跑Home Assistant控制智能家居&#xff0c;但后来换了NUC主机就被束之高阁…...

告别Electron臃肿!用Tauri 2.0 + Rust打造你的第一个轻量级桌面应用(附完整项目结构解析)

从Electron到Tauri 2.0&#xff1a;用Rust重构现代桌面应用开发范式 当Electron应用体积膨胀到200MB起步时&#xff0c;我们不得不重新思考桌面开发的未来。Tauri 2.0的出现绝非偶然——这是前端开发者对性能与体验的集体觉醒。本文将带你深入这个基于Rust的轻量级框架&#xf…...

别再只调PID了!基于STM32C8T6的电磁循迹小车,从硬件滤波到软件算法的抗干扰全攻略

电磁循迹小车的抗干扰实战&#xff1a;从硬件滤波到软件优化的全链路解决方案 当你的电磁循迹小车在实验室里跑得风生水起&#xff0c;一到比赛现场却频频"抽风"&#xff0c;这往往不是PID参数调得不够好&#xff0c;而是整个系统的抗干扰设计存在漏洞。本文将带你深…...

欧拉Euler~21.10系统下OpenSSH 9.0升级与安全加固实战指南

1. 环境准备&#xff1a;从零搭建OpenSSH 9.0升级基础 在欧拉Euler~21.10系统上升级OpenSSH&#xff0c;就像给老房子换新门窗——既要保证新功能正常使用&#xff0c;又不能破坏原有结构。我最近刚在测试环境完成这套操作&#xff0c;整个过程踩过几个坑&#xff0c;这里把完整…...

【Matlab】MATLAB教程:数据插值interp1(案例:interp1(x,y,xi,‘linear‘);应用:数据补全、插值)

MATLAB教程:数据插值interp1(案例:interp1(x,y,xi,linear);应用:数据补全、插值) 在科研实验、工程监测、信号采集等各类数据获取场景中,受限于设备精度、测试条件、环境干扰等因素,采集到的原始数据往往存在**数据点稀疏、采样间隔不均、局部数据缺失**等问题,直接使…...

CTF信息收集入门:从BUUCTF‘粗心的小李’题目看Git泄露的常见利用方式

CTF信息收集实战&#xff1a;Git泄露漏洞的深度利用与防御策略 在CTF竞赛的Web安全赛道上&#xff0c;信息收集能力往往决定着解题的成败。当新手面对看似空白的网页时&#xff0c;常会陷入无从下手的困境——这正是"粗心的小李"这类题目的设计初衷。不同于常规的SQL…...

GF-1遥感影像水体提取实战:Unet++、Deeplabv3+、MANet模型对比与避坑指南

GF-1遥感影像水体提取实战&#xff1a;三大模型对比与避坑全攻略 当国产高分一号&#xff08;GF-1&#xff09;卫星数据遇上深度学习语义分割技术&#xff0c;水体提取这项传统遥感任务正在经历革命性变革。本文将带您深入Unet、Deeplabv3和MANet三大主流模型在GF-1影像上的实战…...

别光看原理了!用STM32F407从零撸一个四轴飞控代码(附完整工程)

用STM32F407从零构建四轴飞控代码实战指南 当你在论坛上看到别人分享的无人机飞行视频&#xff0c;是否也曾心动想亲手打造一套自己的飞控系统&#xff1f;市面上大多数教程止步于理论讲解&#xff0c;真正落实到代码层面的少之又少。本文将带你用STM32F407开发板&#xff0c;…...

射频电路50Ω阻抗匹配原理与工程实践

射频电路中50Ω阻抗匹配的工程学解析1. 射频传输线阻抗标准的历史渊源1.1 同轴电缆的阻抗优化历程1929年贝尔实验室的系列实验揭示了同轴电缆的两个关键阻抗值&#xff1a;30欧姆可实现最大功率传输&#xff0c;77欧姆则对应最小传输损耗。这两个数值的算术平均值为53.5欧姆&am…...