Vue3 中 setup,ref 和 reactive 的理解
setup
Vue3中使用了Composition API这种写法,使得所有的组合API函数都在此使用, 只在初始化时执行一次。
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
ref
作用:定义一个数据的响应式
语法:const xxx = ref(initValue)
一般用来定义一个基本类型的响应式数据
- 创建一个包含响应式数据的引用(reference)对象
- js中操作数据: xxx.value
- 模板中操作数据: 不需要.value
结合setup 和 ref 使用说明
其中vue2的写法为:
<template><h2>{{count}}</h2><hr><button @click="update">更新</button>
</template><script>
export default {/* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */data () {return {count: 0}},methods: {update () {this.count++}}
}
</script>
vue3的写法为:
- setup最终会返回一个对象,并且对象中的值可以在模板中使用,如count
- 保证响应式,必须使用ref
<template><h2>{{count}}</h2><hr><button @click="update">更新</button>
</template><script>
import {ref
} from 'vue'
export default {/* 使用vue3的composition API */setup () {// 定义响应式数据 ref对象const count = ref(1)console.log(count)// 更新响应式数据的函数function update () {count.value = count.value + 1}return {count,update}}
}
</script>
reactive
作用:定义多个数据的响应式,例如一个对象;
const isProxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”:会影响对象内部所有嵌套的属性
内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的
<template><h2>name: {{state.name}}</h2><h2>age: {{state.age}}</h2><h2>wife: {{state.wife}}</h2><hr><button @click="update">更新</button>
</template><script>
import { reactive } from 'vue'
export default {setup () {/* 定义响应式数据对象 */let obj = {name: 'tom',age: 25,wife: {name: 'marry',age: 22},};// 此时state通过 reactive代理了obj,使其内属性成为响应式的;const state = reactive(obj)// 此时打印state 会得到一个Proxy的一个对象// state---代理对象,obj---目标对象console.log(state)const update = () => {state.name += '--'state.age += 1state.wife.name += '++'state.wife.age += 2}return {state,update,}}
}
</script>
总结:如果操作代理对象,目标对象中的值也会跟着改变,如果想要页面跟着渲染,也是操作代理对象;
vue3响应式虽然写起来麻烦,但是减少了vue2响应式带来的性能开销
相关文章:
Vue3 中 setup,ref 和 reactive 的理解
setup Vue3中使用了Composition API这种写法,使得所有的组合API函数都在此使用, 只在初始化时执行一次。 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用 ref 作用:定义一个数据的响应式 语法:const xxx ref(initValue) 一般用来…...
BL302嵌入式ARM控制器进行SQLite3数据库操作的实例演示
本文主要讲述了在钡铼技术BL302嵌入式arm控制器上运行 SQLite3 数据库的命令示例。SQLite3 是一个轻型的嵌入式数据库,不需要安装数据库服务器进程,占用资源低且处理速度快。 首先,需要将对应版本的 SQLite3 文件复制到设备的 /usr/ 目录下&…...
C++ 多线程:std::future
std::future std::future 简介示例1博客引用来源 std::future 简介 我们前面介绍的std::thread 是C11中提供异步创建多线程的工具,只能是异步运行任务,却无法获取任务执行的结果,一般都是依靠全局对象,全局对象在多线程下是及其不…...
断路器回路电阻试验
试验目的 断路器回路电阻主要取决于断路器动、 静触头的接触电阻, 其大小直接影响正常 运行时的发热情况及切断短路电流的性能, 是反应安装检修质量的重要数据。 试验设备 回路电阻测试仪 厂家: 湖北众拓高试代销 试验接线 对于单断口的断路器, 通过断口两端的接线…...
Python中的CALL_FUNCTION指令
在Python字节码中,CALL_FUNCTION指令后跟的数字代表这次函数调用需要从栈上取出的参数的数量。具体来说,这个数字包括位置参数和关键字参数的数量。 这个数字的低两位表示位置参数的数量,然后每两位表示一个关键字参数的数量。因此ÿ…...
微服务——es数据聚合+RestClient实现聚合
数据聚合 聚合的种类 DSL实现Bucket聚合 如图所示,设置了10个桶,那么就显示了数量最多的前10个桶,品牌含有7天酒店的有30家, 品牌含有如家的也有30家。 修改排序规则 限定聚合范围 DSL实现Metrics聚合 如下案例要求对不同的品…...
代码分析Java中的BIO与NIO
开发环境 OS:Win10(需要开启telnet服务,或使用第三方远程工具) Java版本:8 BIO 概念 BIO(Block IO),即同步阻塞IO,特点为当客户端发起请求后,在服务端未处理完该请求之前ÿ…...
网络安全(黑客)工作篇
一、网络安全行业的就业前景如何? 网络安全行业的就业前景非常广阔和有吸引力。随着数字化、云计算、物联网和人工智能等技术的迅速发展,网络安全的需求持续增长。以下是网络安全行业就业前景的一些关键因素: 高需求:随着互联网的…...
zookeeper入门学习
zookeeper入门学习 zookeeper应用场景 分布式协调组件 客户端第一次请求发给服务器2,将flag值修改为false,第二次请求被负载均衡到服务器1,访问到的flag也会是false 一旦有节点发生改变,就会通知所有监听方改变自己的值&#…...
VirtualEnv 20.24.0 发布
导读VirtualEnv 20.24.0 现已发布,VirtualEnv 用于在一台机器上创建多个独立的 Python 运行环境,可隔离项目之间的第三方包依赖,为部署应用提供方便,把开发环境的虚拟环境打包到生产环境即可,不需要在服务器上再折腾一…...
LabVIEW开发高压航空航天动力系统爬电距离的测试
LabVIEW开发高压航空航天动力系统爬电距离的测试 更多电动飞机MEA技术将发电,配电和用电集成到一个统一的系统中,提高了飞机的可靠性和可维护性。更多的电动飞机使用更多的电能来用电动替代品取代液压和气动系统。对车载电力的需求不断增加,…...
【论文阅读】基于深度学习的时序异常检测——Anomaly Transformer
系列文章链接 数据基础:多维时序数据集简介 论文一:2022 Anomaly Transformer:异常分数预测 论文二:2022 TransAD:异常分数预测 论文链接:Anomaly Transformer.pdf 代码链接:https://github.co…...
Java并发总结
1.创建线程三种方式 Runnable.Callable接口使用继承Thread类的方式创建多线程Runnable 和Callable区别 Callable规定(重写)的方法是call(),Runnable规定(重写)的方法是run()。Callable的任务执行后可返回值࿰…...
视频汇聚平台EasyCVR视频广场侧边栏支持拖拽
为了提升用户体验以及让平台的操作更加符合用户使用习惯,我们在EasyCVR v3.3版本中,支持面包屑侧边栏的广场视频、分组列表、收藏这三个模块拖拽排序,并且该操作在视频广场、视频调阅、电子地图、录像回放等页面均能支持。 TSINGSEE青犀视频…...
MyCat分片规则——范围分片、取模分片、一致性hash、枚举分片
1.范围分片 2.取模分片 范围分片和取模分片针对数字类型的字段可以,但是针对于字符串类型的字段时。这两种就不适用了。 3.一致性hash 4.枚举分片 默认节点指的是,如果我们向数据库表插入数据的时候,超出了这个枚举值,那么默认向…...
设计模式行为型——备忘录模式
目录 什么是备忘录模式 备忘录模式的实现 备忘录模式角色 备忘录模式类图 备忘录模式举例 备忘录模式代码实现 备忘录模式的特点 优点 缺点 使用场景 注意事项 实际应用 什么是备忘录模式 备忘录模式(Memento Pattern)又叫做快照模式&#x…...
Parquet存储的数据模型以及文件格式
文章目录 数据模型Parquet 的原子类型Parquet 的逻辑类型嵌套编码 Parquet文件格式 本文主要参考文献:Tom White. Hadoop权威指南. 第4版. 清华大学出版社, 2017.pages 363. Aapche Parquet是一种能有效存储嵌套数据的列式存储格式,在Spark中应用较多。 …...
Go和Java实现访问者模式
Go和Java实现访问者模式 我们下面通过一个解压和压缩各种类型的文件的案例来说明访问者模式的使用。 1、访问者模式 在访问者模式中,我们使用了一个访问者类,它改变了元素类的执行算法。通过这种方式,元素的执行算法可以随 着访问者改变而…...
想要通过软件测试的面试,都需要学习哪些知识
很多人认为,软件测试是一个简单的职位,职业生涯走向也不会太好,但是随着时间的推移,软件测试行业的变化,人们开始对软件测试行业的认知有了新的高度,越来越多的人开始关注这个行业,开始重视这个…...
MySQL的索引使用的数据结构,事务知识
一、索引的数据结构🌸 索引的数据结构(非常重要) mysql的索引的数据结构,并非定式!!!取决于MySQL使用哪个存储引擎 数据库这块组织数据使用的数据结构是在硬盘上的。我们平时写的代码是存在内存…...
SRAM vs ReRAM vs Flash:一张表看懂不同存内计算芯片的优缺点与选型指南
SRAM vs ReRAM vs Flash:存内计算芯片技术选型全景指南 在AI算力需求爆炸式增长的今天,传统冯诺依曼架构的"内存墙"瓶颈日益凸显。存内计算技术通过将计算单元嵌入存储阵列,彻底打破了数据搬运的能耗桎梏。根据最新行业报告&#x…...
AI持续爆火,相关岗位薪资到底达到了多少,AI大模型岗位薪资真相:多少年包能拿到?普通人如何破局?
“AI相关岗位薪资” 随着AI持续火爆,各大厂也都在招聘相关人才,近日OfferShow专门对AI相关岗位的工资情况进行了一期专题汇总,都是校招岗位年包90W左右年包100W年包80w70W50W左右40W左右54W左右34W左右。 看大家投票可信度还是挺高的…...
3.25 复试练习
OJ改错填空strcpy--strcpy(dest, src); // 将src复制到deststrcmp--strcmp(s1, s2);返回值含义0两个字符串相等> 0s1 大于 s2< 0s1 小于 s2矩阵质因数问题描述将一个正整数N(1<N<32768)分解质因数。例如,输入90,打印出902*3*3*5。输入说明输…...
Homebrew卸载与重装指南:彻底清理残留文件的正确姿势
Homebrew深度清理与重装实战:从残留文件追踪到ARM架构优化 每次系统升级或开发环境切换时,那些隐藏在系统深处的Homebrew残留文件就像房间里扫不尽的灰尘——明明已经卸载了所有公式,却在重新安装时遇到各种诡异的权限错误或版本冲突。作为m…...
如何用stressapptest进行高效内存和磁盘压力测试?实战案例分享
如何用stressapptest进行高效内存和磁盘压力测试?实战案例分享 在服务器运维和硬件性能评估中,内存和磁盘的稳定性直接关系到系统的可靠性。想象一下,当你的服务器在凌晨三点突然因为内存错误崩溃,或者磁盘在高峰期出现读写异常&a…...
OpenClaw自动化周报生成:Qwen3-32B私有镜像精准提取Git提交记录
OpenClaw自动化周报生成:Qwen3-32B私有镜像精准提取Git提交记录 1. 为什么需要自动化周报生成 每周五下午,我都会面临同样的困扰:需要从零散的Git提交记录中手动整理本周工作内容,再拼凑成一份结构化的周报。这个过程不仅耗时&a…...
终极指南:如何深度定制webMAN-MOD打造专属PS3游戏管家
终极指南:如何深度定制webMAN-MOD打造专属PS3游戏管家 【免费下载链接】webMAN-MOD Extended services for PS3 console (web server, ftp server, netiso, ntfs, ps3mapi, etc.) 项目地址: https://gitcode.com/gh_mirrors/we/webMAN-MOD 你是否曾为PS3游戏…...
K230目标检测实战:手把手教你用Labelme标注数据并一键转成VOC格式(附避坑指南)
K230目标检测实战:高效数据标注与VOC格式转换全攻略 当你第一次接触K230开发板进行目标检测项目时,数据准备往往是最大的拦路虎。特别是从原始图片到符合AI_Cube要求的VOC格式数据集,这个过程充满了各种"坑"。本文将分享一套经过实…...
软件工程实战:如何用数据流图搞定图书馆管理系统设计(附避坑指南)
软件工程实战:如何用数据流图搞定图书馆管理系统设计(附避坑指南) 图书馆管理系统是软件工程课程中的经典案例,但许多初学者在绘制数据流图时容易陷入"画了等于没画"的困境——要么遗漏关键外部实体,要么数据…...
JSON·学习笔记
“误报。我的安全阀一切正常。” “我们继续,今天我想解释一下什么是JSON。” “是啊,这个词我听过很多次了,什么意思?” “随着网络的发展,带有 JavaScript 的 HTML 页面开始主动与服务器通信并从服务器下载数据。为…...
