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代理 

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

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

相关文章

数据结构:红黑树的原理和实现

文章目录 红黑树的概念红黑树的性质红黑树的模拟实现红黑树的平衡问题 整体实现和测试 本篇用于进行红黑树的拆解和模拟实现,为之后的map和set的封装奠定基础 红黑树的概念 红黑树也是一种二叉搜索树,但是在每一个节点的内部新增了一个用以表示该节点颜…

IDEA的优化配置教程

前言 IDEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的java开发工具,尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以…

Day 项目介绍与 SSM 环境搭建

介绍一个使用Java语言开发的项目,演示并如何搭建一个基于SSM(SpringSpring MVCMyBatis)框架的开发环境。SSM是一种常用的Java Web开发框架,它集成了Spring、Spring MVC和MyBatis,提供了一套完整的开发架构,…

OOM汇总

1. 堆内存溢出 堆内存溢出通常是由于创建了过多的对象,而导致堆内存耗尽而发生的。以下是导致堆内存溢出的一些常见情况: 内存泄漏: 如果程序中存在内存泄漏,即一些对象不再被引用,但仍然存活于堆内存中,…

thinkphp5 连接多个服务器数据库

如果你的database.php 是这样, 这是默认的db连接配置 如果还想连接其他服务器,或数据库 在config.php中追加数据库配置, 在使用的地方调用: use think\Db;public function test(){$db3Db::connect(config(db3));$result $db3…

使用gitflow时如何合并hotfix

前言 在使用 git flow 流程时, 对于项目型的部署项目经常会遇到一个问题, 就是现场项目在使用历史版本时发现的一些问题需要修复, 但升级可能会有很大的风险或客户不愿意升级, 这时就要求基于历史版本进行 hotfix 修复. 基于历史发布版本的缺陷修复方式不同于最新发布版本的补…

CSS 实现文字两端对齐效果

直接上代码: .text{text-align: justify;text-align-last: justify;// 兼容ie (未测试)text-justify: distribute-all-lines; }注意: text-align-last: justify; 只对中文文字起效果。数字和英文字母则需要使用空格间隔开,然后使用上述方法即…

自然语言处理实战项目21-两段文本的查重功能,返回最相似的文本字符串,可应用于文本查重与论文查重

大家好,我是微学AI,今天给大家介绍一下自然语言处理实战项目21-两段文本的查重功能,返回最相似的文本字符串,可应用于论文查重。本文想实现一种文本查重功能,通过输入两段文本,从中找出这两段文本中最相似的句子。这项技术有助于检测抄袭、抄袭的论文和文章,提高知识创新…

Ubuntu22.04 FTP 搭建以及挂载

软件安装 sudo apt-get update 服务端nfs-kernel-server 客户端nfs-common sudo apt-get install -y nfs-kernel-server nfs-common创建NFS共享目录 sudo mkdir -p /nfssudo chown -R nobody:nogroup /nfs sudo chmod -R 777 /nfs配置文件 sudo vim /etc/exports# [共享目录…

08.oracle的表

oracle的表 一、与表相关的几个概念二、表的几种类型包括:三、对表的一些基本操作 一、与表相关的几个概念 高水位线(High Water Mark):是指表中已经被使用的空间的最高位置。当表中的数据被删除或更新时,高水位线不会…

Go使用命令行输出二维码

引言 二维码(QR code)是一种矩阵条码的标准,广泛应用于商业、移动支付和数据存储等领域。在开发过程中,我们可能需要在命令行中显示二维码,这可以帮助我们快速生成和分享二维码信息。本文将介绍如何使用Go语言生成二维…

【SpringBoot】SpringBoot自动配置底层源码解析

概述 EnableAutoConfiguration源码解析SpringBoot常用条件注解源码解析SpringBoot之Mybatis自动配置源码解析SpringBoot之AOP自动配置源码解析SpringBoot Jar包启动过程源码解析 DeferredImportSelector接口 DeferredImportSelector和ImportSelector的区别在于: …

Ubuntu2204 搭建TFTP 服务

安装软件 sudo apt-get install tftp-hpa tftpd-hpa xinetd配置服务 配置tftp sudo vim /etc/xinetd.d/tftp 填入以下参数,/home/tftp 换成自己的共享目录 server tftp {socket_type dgramprotocol udp wait yes user rootserver /usr/sbin/in.tftpdserver_…

windows远程桌面登录ubuntu,黑屏闪退,

首先需要安装xrdp以后才能远程登录,安装命令 sudo apt-get install xrdp 这里需要注意一个问题,如果在ubuntu 本地登录的情况下,windows远程登录会出现黑屏甚至闪退的问题。原因是本地登录和远程登陆是互斥的,本地登录了就不能远…

Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks - 翻译学习

知识密集型NLP任务的检索增强生成 - 论文学习 文章目录 Abstract1 Introduction2 Methods2.1 Models2.2 Retriever: DPR2.3 Generator: BART2.4 Training2.5 Decoding 3 Experiments3.1 Open-domain Question Answering3.2 Abstractive Question Answering3.3 Jeopardy Questio…

java内部类初探

引言 内部类是定义在另一个类中的类,它曾经对于简洁地实现回调非常重要,不过今天lambda表达式在这方面可以做的更好。但内部类对于某些结构的构建还是很有用的。 普通内部类 常规的内部类有以下两个特点: 1.内部类可以对除了自己的外部类以…

医疗器械维修工程师必须重视的方面

彩虹医疗器械维修技能培训开班报名中 长期班低至五折, 打破常规培训模式轻松愉快技术学习! 两个多月时间,提升自我! 点击进入 彩虹实训基地 理论实践结合教学 小班授课 立即咨询 1 工程师须重视 在医疗行业中,…

青少年编程学习 等级考试 信奥赛NOI/蓝桥杯/NOC/GESP等比赛资料合集

一、博主愚见 在当今信息技术高速发展的时代,编程已经成为了一种必备的技能。随着社会对于科技人才的需求不断增加,青少年编程学习正逐渐成为一种趋势。为了更好地帮助青少年学习编程,提升他们的技能和素质,博主结合自身多年从事青…

MacOS下VMware Fusion配置静态IP

前言 在虚拟机安装系统后,默认是通过DHCP动态分配的IP,这会导致每次重启虚拟机ip都可能会改变,使用起来会有很多不便。 配置静态IP 查看主机网关地址 cat /Library/Preferences/VMware\ Fusion/vmnet8/nat.conf 查看主机DNS,m…

宿主机无法连接docker里的redis问题解决(生产环境慎用)

宿主机无法连接docker里的redis问题解决(生产环境慎用) 问题描述解决方案 问题描述 1.连接超时 2.连接能连上但马上断开并报错 3.提示保护模式什么的 (error) DENIED Redis is running in protected mode because protected mode is enabled链接redis …