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

Vue3中的ref和reactive

今天在写前端, 用的是Vue3, 其实之前也有写过一些前端, 但是涉及不深, 差不多是基础的水平, 然后现在想跟进下Vue3, 就有点吃力得紧, 就单单一个变量的引用, 就折腾得不轻,调试的时候, 取值都是各种undefined, 然后就特地找了下相关的资料, 这才明白ref和reactive的区别。
在 Vue 3 中,refreactive 是用于创建响应式数据的两个核心 API。它们的主要区别在于处理数据的方式和适用场景。

ref

  • ref 用于定义一个响应式的数据对象。
  • 它可以接受一个内部值并返回一个响应式的、可变的 ref 对象,该对象只有一个 .value 属性。
  • 在模板中直接使用 ref 时,Vue 会自动解构 .value,因此不需要显式地写 .value
  • 在 JavaScript 中操作 ref 时,必须使用 .value 来访问或修改其值。

reactive

  • reactive 用于创建一个响应式的对象或数组。
  • 它返回一个对象的响应式代理。
  • 在模板或响应式对象内部直接访问属性时,不需要 .value
  • reactive 只能处理对象和数组,对于基本数据类型(String、Number、Boolean 等)不适用。

什么时候用 .value 取值

  • 当你在 JavaScript 中直接操作 ref 时,需要使用 .value
  • 当你将 ref 作为响应式对象的属性时,在 JavaScript 中操作该属性时也需要 .value

什么时候可以直接取值

  • 在 Vue 模板中,Vue 会自动解构 ref.value,因此可以直接使用 ref 而不需要 .value
  • 对于 reactive 创建的响应式对象,无论是在模板中还是在 JavaScript 中,都可以直接访问其属性,不需要 .value

示例

import { ref, reactive } from 'vue';
const count = ref(0); // 创建一个响应式的 ref 对象
const state = reactive({ count: 1 }); // 创建一个响应式的 reactive 对象
// 在 JavaScript 中操作 ref 时需要使用 .value
console.log(count.value); // 0
count.value++;
// 在 JavaScript 中操作 reactive 对象时,直接访问属性
console.log(state.count); // 1
state.count++;
// 在模板中使用 ref 和 reactive
<template><div>{{ count }}</div> <!-- 自动解构 .value --><div>{{ state.count }}</div> <!-- 直接访问属性 -->
</template>

在选择使用 ref 还是 reactive 时,可以根据你的具体需求来决定。如果你需要处理基本数据类型,或者希望明确地管理单个值的响应性,那么 ref 是更好的选择。如果你正在处理一个对象或数组,并且希望整个对象或数组都是响应式的,那么 reactive 会更加适合。

相关文章:

Vue3中的ref和reactive

今天在写前端&#xff0c; 用的是Vue3&#xff0c; 其实之前也有写过一些前端&#xff0c; 但是涉及不深&#xff0c; 差不多是基础的水平&#xff0c; 然后现在想跟进下Vue3&#xff0c; 就有点吃力得紧&#xff0c; 就单单一个变量的引用&#xff0c; 就折腾得不轻&#xff0…...

第二十节 Java 正则表达式

正则表达式定义了字符串的模式。 正则表达式可以用来搜索、编辑或处理文本。 正则表达式并不仅限于某一种语言&#xff0c;但是在每种语言中有细微的差别。 Java正则表达式和Perl的是最为相似的。 java.util.regex包主要包括以下三个类&#xff1a; Pattern类&#xff1a;…...

ubuntu下vscode+STM32CubeMX+openocd+stlinkv2搭建STM32开发调试下载环境

1、换源 清华源 # 默认注释了源码镜像以提高 apt update 速度&#xff0c;如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy main restr…...

【嵌入式高级C语言】9:万能型链表懒人手册

文章目录 序言单向不循环链表拼图框架搭建 - Necessary功能拼图块1 创建链表头信息结构体 - Necessary2 链表头部插入 - Optional3 链表的遍历 - Optional4 链表的销毁 - Necessary5 链表头信息结构体销毁 - Necessary6 获取链表中节点的个数 - Optional7 链表尾部插入 - Optio…...

如何快速分析OB集群日志,敏捷诊断工具obdiag分析能力实践——《OceanBase诊断系列》之四

1. 前言 obdiag是OceanBase的敏捷诊断工具。1.2版本中&#xff0c;obdiag支持快速收集诊断信息&#xff0c;但仅有收集能力是不够的&#xff0c;还需要有分析能力。因此在obdiag的1.3.0版本中&#xff0c;我们加入了OB集群的日志分析功能。用户可以一键进行集群的OB日志的分析…...

7.1.3 Selenium的用法2

目录 1. 切换 Frame 2. 前进后退 3. 对 Cookies 操作 4. 选项卡管理(了解) 5. 异常处理 6. 反屏蔽 7. 无头模式 1. 切换 Frame 我们知道网页中有一种节点叫作 iframe&#xff0c;也就是子 Frame&#xff0c;相当于页面的子页面&#xff0c;它的结构和外部网页的结构完全…...

微信小程序(五十四)腾讯位置服务示范(2024/3/8更新)

教程如下&#xff1a; 上一篇 1.先在官网注册一下账号&#xff08;该绑定的都绑定一下&#xff09; 腾讯位置服务官网 2.进入控制台 3.创建应用 3. 额度分配 4.下载微信小程序SDK 微信小程序SDK下载渠道 5.解压将俩js文件放在项目合适的地方 6.加入安全域名or设置不验证合…...

Selenium库快速查找网页元素及执行浏览器模拟操作

Selenium 是一个自动化测试工具&#xff0c;主要用于模拟用户在网页上的行为&#xff0c;进行自动化测试。它支持多种浏览器&#xff0c;并且可以在多种操作系统上运行。以下是 Selenium 库的一些主要特点和用途&#xff1a; 网页自动化测试&#xff1a; Selenium 可以模拟用户…...

2024年(第十届)全国大学生统计建模大赛选题参考(一)

本届大赛主题为“大数据与人工智能时代的统计研究”&#xff0c;参赛队围绕主题自拟题目撰写论文。 1. 大数据分析与处理 研究思路 数据收集&#xff1a;首先确定数据来源&#xff0c;例如社交媒体、企业数据库或公开数据集&#xff0c;并使用爬虫技术或API收集数据。数据预…...

EI级 | Matlab实现GCN基于图卷积神经网络的数据多特征分类预测

EI级 | Matlab实现GCN基于图卷积神经网络的数据多特征分类预测 目录 EI级 | Matlab实现GCN基于图卷积神经网络的数据多特征分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.GCN基于图卷积神经网络的数据分类预测 Matlab2023 2.多输入单输出的分类预测&#xf…...

贪心算法介绍

贪心算法是一种在求解问题时总是做出在当前看来是最好的选择的算法。它不从整体最优上加以考虑&#xff0c;所做出的选择只是在某种意义上的局部最优解。贪心算法不是对所有问题都能得到整体最优解&#xff0c;关键是贪心策略的选择&#xff0c;选择的贪心策略必须具备无后效性…...

前端常用数据结构

前端常用数据结构 前端常用数据结构数据结构数组栈队列链表单向链表双向链表树前端常用数据结构 什么是数据结构常用的数据结构 JavaScript 如何实现这些数据结构实际场景数据结构 所谓数据结构,是在计算机中组织、管理和存储数据的一种方式。 🙋:你知道哪些数据结构? …...

java设计模式之——单例模式

一&#xff1a;什么是单例模式&#xff1f; 构造函数private之后&#xff0c;还需要提供一个方法&#xff0c;要保证只能初始化一个单例对象&#xff0c;并且需要考虑线程安全的问题。 二&#xff1a;单例模式多种写法&#xff1f; 具体到写法上&#xff0c;主要有5种&#…...

深入理解计算机系统学习笔记

1.1异常处理 处理器中很多事情都会导致异常控制流&#xff0c;此时&#xff0c;程序执行的正常流程被破坏掉。异常可以由程序执行从内部产生&#xff0c;也可以由某个外部信号从外部产 生。 我们的指令集体系结构包括三种不同的内部产生的异常&#xff1a; l)halt指令&#…...

Linux-进程信号

目录 概念信号产生信号注册信号注销信号处理实例 信号的基本应用 概念 进程信号&#xff1a; 概念&#xff1a;信号就是软件中断。信号就是用于向进程通知某个事件的产生&#xff0c;打断进程当前操作&#xff0c;去处理这个事件。 linux中信号的种类&#xff1a;使用kill -l命…...

Linux服务器安装jdk

背景: 安装JDK是我们java程序在服务器运行的必要条件,下面描述几个简单的命令就可再服务器上成功安装jdk 命令总览: yum update -y yum list | grep jdk yum -y install java-1.8.0-openjdk java -version 1.查看可安装版本 yum list | grep jdk 2.如果查不到可先进行 yum upd…...

基于 HBase Phoenix 构建实时数仓(2)—— HBase 完全分布式安装

目录 一、开启 HDFS 机柜感知 1. 增加 core-site.xml 配置项 2. 创建机柜感知脚本 3. 创建机柜配置信息文件 4. 分发相关文件到其它节点 5. 重启 HDFS 使机柜感知生效 二、主机规划 三、安装配置 HBase 完全分布式集群 1. 在所有节点上配置环境变量 2. 解压、配置环境…...

equals()与==的区别

在Java中 可以对基本类型进行比较,比较的是值是否相等 也可以对引用类型(对象)进行比较,比较的是引用变量所指向的空间地址 public static void main(String[] args) {int a 10;int b 10;System.out.println(ab);//true// 基本类型比较,比较值是否相等String s1 new Stri…...

什么是数据采集与监视控制系统(SCADA)?

SCADA数据采集是一种用于监控和控制工业过程的系统。它可以实时从现场设备获得数据并将其传输到中央计算机&#xff0c;以便进行监控和控制。SCADA数据采集系统通常使用传感器、仪表和控制器收集各种类型的数据&#xff0c;例如温度、压力、流量等&#xff0c;然后将这些数据汇…...

基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程(五)——多条件搜索并分页展示

前后端数据交互 书接上文&#xff0c;我们上节课通过前后端数据交互实现了分页查询和单条件搜索分页查询的功能&#xff0c;最后留了个小尾巴&#xff0c;就是把其他两个搜索条件&#xff08;email,address&#xff09;也加进来&#xff0c;实现多条件搜索并分页展示。这节课我…...

WPF实时波形图避坑指南:用Scottplot处理8KHz脑电信号,我是这样解决百万数据点卡顿的

WPF高频脑电信号可视化实战&#xff1a;ScottPlot百万级数据点性能调优全解析 医疗级脑电信号采集系统通常要求8KHz以上的采样率&#xff0c;这意味着每秒钟会产生8000个数据点。当需要实时显示30秒的历史波形时&#xff0c;渲染24万个数据点对任何可视化库都是严峻挑战。本文将…...

从glibc 2.34移除csu函数谈起:ret2csu技巧的过去、现在与替代方案

从glibc 2.34移除csu函数看ROP技术的演进与替代方案 在二进制安全领域&#xff0c;ROP&#xff08;Return-Oriented Programming&#xff09;技术一直是攻击者绕过现代防护机制的重要手段。其中&#xff0c;ret2csu作为一种经典的ROP技巧&#xff0c;因其通用性和高效性备受安…...

为什么TranslucentTB开机不启动?Windows任务栏透明工具自启动问题完全解决指南

为什么TranslucentTB开机不启动&#xff1f;Windows任务栏透明工具自启动问题完全解决指南 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB …...

从无效投稿到精准命中:百考通AI如何将期刊论文的“隐形门槛”转化为清晰路标

精准匹配期刊类型&#xff0c;结构化写作支持&#xff0c;一键生成规范论文框架 “您的稿件经审阅&#xff0c;不适合在本刊发表&#xff0c;建议改投他刊。” 面对编辑部的退稿通知&#xff0c;你是否也曾感到迷茫&#xff1f;研究明明投入了大量心血&#xff0c;却屡屡在投稿…...

ROS驱动配置与Kinect连接指南

nano端ssh nano192.168.31.150性能模式# 开启最大性能模式 (10W 模式) sudo nvpmodel -m 0 # 强制将 CPU/GPU 频率锁定到最高 sudo jetson_clockskinect 驱动cd catkin_ws source ./devel/setup.bash roslaunch freenect_launch freenect.launch depth_registration:true data…...

光电对抗:电磁波—物质相互作用研究的重点难点和的前沿进展

一、理论盲点与认知局限电磁波与物质相互作用的一些深层机理&#xff0c;特别是微观尺度下的复杂过程&#xff0c;我们的认识还存在局限&#xff1a;1. 微观机理的精细描绘&#xff1a;虽然麦克斯韦方程组和量子理论提供了基础框架&#xff0c;但精确描述复杂材料体系中多种损耗…...

51单片机型号数字暗藏玄机?STC89C51、C52、C54命名规则与存储空间全解析

51单片机型号密码&#xff1a;从STC89C52数字后缀破解存储空间玄机 第一次接触51单片机时&#xff0c;你是否也被各种型号后缀搞得一头雾水&#xff1f;STC89C51、C52、C54这些看似随机的数字组合&#xff0c;其实暗藏着一套精妙的行业密码。今天我们就来当一回"芯片侦探&…...

Steam成就管理终极指南:如何用SteamAchievementManager掌控你的游戏成就

Steam成就管理终极指南&#xff1a;如何用SteamAchievementManager掌控你的游戏成就 【免费下载链接】SteamAchievementManager A manager for game achievements in Steam. 项目地址: https://gitcode.com/gh_mirrors/st/SteamAchievementManager SteamAchievementMana…...

技术日报|金融终端FinceptTerminal夺冠,WiFi信号实时人体姿态估计工具RuView亮相榜单

&#x1f31f; TrendForge 每日精选 - 发现最具潜力的开源项目 &#x1f4ca; 今日共收录 10 个热门项目&#x1f310; 智能中文翻译版 - 项目描述已自动翻译&#xff0c;便于理解&#x1f3c6; 今日最热项目 Top 10 &#x1f947; Fincept-Corporation/FinceptTerminal 项目简…...

上线当天注册接口被刷爆:我用滑块验证码 + 请求指纹把羊毛党拦在了网关层

上线当天注册接口被刷爆&#xff1a;我用滑块验证码 请求指纹把羊毛党拦在了网关层 上线第三个小时&#xff0c;注册接口的 QPS 从平时的 120 飙到 3800。验证码服务炸了&#xff0c;短信账单直接刷了半个月的预算。我打开监控面板&#xff0c;看到一波 IP 地址每秒钟都在换&a…...