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

Vue3 ref函数和reactive函数

一、ref函数

我们在setup函数中导出的属性和方法虽然能够在模板上展示出来,但是并没有给属性添加响应式,因此,我们需要使用ref函数来为我们的数据提供响应式。

(一)引入ref函数

import { ref } from "vue";

(二)创建响应式数据

const 属性名 = ref(属性值);

这里我们为什么可以用const进行声明?

如果我们定义三个响应式属性,并输出,就会发现这些属性都被打包为RefImpl 对象(也称为引用对象或ref对象),我们可以通过 .value 值来访问和修改我们的属性。

因此,即使我们使用const 来定义一个变量,改变对象中的属性并不会对对象本身产生什么影响。

 

这里的传入值为对象,value就会变为一个Proxy对象(后面会解释其原理) 

 (三)响应式数据的读取和修改

基本类型的数据:变量.value = 值

对象类型的数据:变量.value.属性名 = 值

注意:我们在模板中读取属性的时候并不需要使用.value,ref的原理仍然是Object.defineProperty

二、reactive函数

reactive函数和ref函数的作用类似,不过是定义一个对象或数组类型的响应式数据。

(一)引入reactive函数

import { reactive } from "vue";

(二)创建响应式数据 

const 属性 = reactive(对象)  或  const 属性 = reactive(数组)

返回的是一个使用Proxy代理的对象

 

(三)响应式数据的读取和修改 

对象类型的数据:对象.属性名 = 属性值

数组类型的数据:数组[x] = 元素值

 

注意:使用reactive函数定义的响应式数据是“深层次的”,内部使用的Proxy代理 

相关文章:

Vue3 ref函数和reactive函数

一、ref函数 我们在setup函数中导出的属性和方法虽然能够在模板上展示出来,但是并没有给属性添加响应式,因此,我们需要使用ref函数来为我们的数据提供响应式。 (一)引入ref函数 import { ref } from "vue"…...

docker常用命令详解

1. Image常见操作 (1)查看本地image列表 docker images docker image ls (2)获取远端镜像 docker pull (3)删除镜像[注意此镜像如果正在使用,或者有关联的镜像,则需要先处理完] docker image rm imageid docker rmi -f imageid docker rmi -f $(docker …...

采集Prestashop独立站采集Prestashop独立站

import java.net.URL 这一行导入了Java.net包中的URL类,这个类在处理URL链接时非常有用。 import org.jsoup.Jsoup 这一行导入了Jsoup库,它是一个强大的HTML和XML文档解析库,我们可以使用它来解析网页内容。 import org.jsoup.nodes.Docume…...

2023.11-9 hive数据仓库,概念,架构,元数据管理模式

目录 0.数据仓库和数据库 数据仓库和数据库的区别 数据仓库基础三层架构 一.HDFS、HBase、Hive的区别 二.大数据相关软件 三. Hive 的优缺点 1)优点 2)缺点 四. Hive 和数据库比较 1)查询语言 2)数据更新 3)…...

MFC 简单绘图与文本编辑

目录 一.创建单文档项目 二.消息映射机制 三.WM_PAINT消息触发 四.CVIEW类 五.设备上下文 六.资源类和资源的关系 七.画线,矩形 八.画布 九.画笔 十.画刷 十一.利用TRACE打印日志 十二.文本编程 十三.ID号 十四.菜单栏 十五.菜单命令路由 十六.工具…...

C# 中的 SerialPort

简介 C# 中的 SerialPort 类提供了对串行端口(如 COM 端口)进行通信的功能。通过 SerialPort 类,你可以打开、关闭端口,读取和写入数据以及设置通信参数等。下面是对 SerialPort 类的一些详细解释: 创建 SerialPort 对…...

2022年06月 Python(五级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 Python中 print(“八进制{: o}”.format(12)) 正确的输出结果是?( ) A: 八进制:O B: 八进制:O14 C: 八进制14O D: 八进制14 答案:D 字符串的format()格式。 第2题 下列的程…...

YOLO图像识别

YOLO(you only look once),指只需要浏览一次就可以识别出图中的物体的类别和位置。 也因为只需要看一次,YOLO被称为Region-free方法,相比于Region-based方法,YOLO不需要提前找到可能存在目标的Region。 与…...

2023NewStarCTF

目录 一、阳光开朗大男孩 二、大怨种 三、2-分析 四、键盘侠 五、滴滴滴 六、Include? 七、medium_sql 八、POP Gadget 九、OtenkiGirl 一、阳光开朗大男孩 1.题目给出了secret.txt和flag.txt两个文件,secret.txt内容如下: 法治自由公正爱国…...

计算机网络的发展及应用

计算机网络是计算机技术和通信技术高度发展并相互结合的产物。一方面,通信系统为计算机之间的数据传送提供最重要的支持;另一方面,由于计算机技术渗透到了通信领域,极大地提高了通信网络的性能。计算机网络的诞生和发展&#xff0…...

K-means(K-均值)算法

K-means(k-均值,也记为kmeans)是聚类算法中的一种,由于其原理简单,可解释强,实现方便,收敛速度快,在数据挖掘、聚类分析、数据聚类、模式识别、金融风控、数据科学、智能营销和数据运…...

网络安全自学

前言 一、什么是网络安全 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域,都有攻与防…...

加速mvn下载seatunnel相关jar包

seatunnel安装的时候,居然要使用mvnw来下载jar包,而且是从https://repo.maven.apache.org 下载,速度及其缓慢,改用自己本地的mvn下载。 修改其安装插件相关脚本,复制install-plugin.sh重命名为install-plugin-mvn.sh …...

【函数讲解】botorch中的函数 is_non_dominated():用于计算非支配(non-dominated)前沿

# 获取训练目标值,计算Pareto前沿(非支配解集合),然后从样本中提取出Pareto最优解。train_obj self.samples[1]pareto_mask is_non_dominated(train_obj)pareto_y train_obj[pareto_mask] 源码 这里用到了一个函数 is_non_dom…...

LeetCode题94,44,145,二叉树的前中后序遍历,非递归

注意:解题都要用到栈 一、前序遍历 题目要求 给你二叉树的根节点 root ,返回它节点值的 前序 遍历。 示例 1: 输入:root [1,null,2,3] 输出:[1,2,3]示例 2: 输入:root [] 输出:[…...

Python 框架学习 Django篇 (九) 产品发布、服务部署

我们前面编写的所有代码都是在windows上面运行的,因为我们还处于开发阶段 当我们完成具体任务开发后,就需要把我们开发的网站服务发布给真正的用户 通常来说我们会选择一台公有云服务器比如阿里云ecs,现在的web服务通常都是基于liunx操作系统…...

Git 服务器上的 LFS 下载

以llama为例: https://huggingface.co/meta-llama/Llama-2-7b-hf Github # 1. 安装完成后,首先先初始化;如果有反馈,一般表示初始化成功 git lfs install ​ # 2. 如果刚刚下载的那个项目没啥更改,重新下一遍&#x…...

Canvas和SVG:你应该选择哪一个?

如果你是一个Web开发者,你可能已经听说过Canvas和SVG。这两种技术都可以用来创建图形和动画,但它们有什么区别?在这篇文章中,我们将探讨Canvas和SVG的区别以及它们的应用场景,帮助你决定哪种技术更适合你的项目。 什么…...

openGauss学习笔记-122 openGauss 数据库管理-设置密态等值查询-密态支持函数/存储过程

文章目录 openGauss学习笔记-122 openGauss 数据库管理-设置密态等值查询-密态支持函数/存储过程122.1 创建并执行涉及加密列的函数/存储过程 openGauss学习笔记-122 openGauss 数据库管理-设置密态等值查询-密态支持函数/存储过程 密态支持函数/存储过程当前版本只支持sql和P…...

BEVFormer 论文阅读

论文链接 BEVFormer BEVFormer,这是一个将Transformer和时间结构应用于自动驾驶的范式,用于从多相机输入中生成鸟瞰(BEV)特征利用查询来查找空间/时间,并相应地聚合时空信息,从而为感知任务提供更强的表示…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...