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

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的写法为:

  1. setup最终会返回一个对象,并且对象中的值可以在模板中使用,如count
  2. 保证响应式,必须使用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这种写法&#xff0c;使得所有的组合API函数都在此使用, 只在初始化时执行一次。 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用 ref 作用&#xff1a;定义一个数据的响应式 语法&#xff1a;const xxx ref(initValue) 一般用来…...

BL302嵌入式ARM控制器进行SQLite3数据库操作的实例演示

本文主要讲述了在钡铼技术BL302嵌入式arm控制器上运行 SQLite3 数据库的命令示例。SQLite3 是一个轻型的嵌入式数据库&#xff0c;不需要安装数据库服务器进程&#xff0c;占用资源低且处理速度快。 首先&#xff0c;需要将对应版本的 SQLite3 文件复制到设备的 /usr/ 目录下&…...

C++ 多线程:std::future

std::future std::future 简介示例1博客引用来源 std::future 简介 我们前面介绍的std::thread 是C11中提供异步创建多线程的工具&#xff0c;只能是异步运行任务&#xff0c;却无法获取任务执行的结果&#xff0c;一般都是依靠全局对象&#xff0c;全局对象在多线程下是及其不…...

断路器回路电阻试验

试验目的 断路器回路电阻主要取决于断路器动、 静触头的接触电阻, 其大小直接影响正常 运行时的发热情况及切断短路电流的性能, 是反应安装检修质量的重要数据。 试验设备 回路电阻测试仪 厂家&#xff1a; 湖北众拓高试代销 试验接线 对于单断口的断路器, 通过断口两端的接线…...

Python中的CALL_FUNCTION指令

在Python字节码中&#xff0c;CALL_FUNCTION指令后跟的数字代表这次函数调用需要从栈上取出的参数的数量。具体来说&#xff0c;这个数字包括位置参数和关键字参数的数量。 这个数字的低两位表示位置参数的数量&#xff0c;然后每两位表示一个关键字参数的数量。因此&#xff…...

微服务——es数据聚合+RestClient实现聚合

数据聚合 聚合的种类 DSL实现Bucket聚合 如图所示&#xff0c;设置了10个桶&#xff0c;那么就显示了数量最多的前10个桶&#xff0c;品牌含有7天酒店的有30家&#xff0c; 品牌含有如家的也有30家。 修改排序规则 限定聚合范围 DSL实现Metrics聚合 如下案例要求对不同的品…...

代码分析Java中的BIO与NIO

开发环境 OS&#xff1a;Win10&#xff08;需要开启telnet服务&#xff0c;或使用第三方远程工具&#xff09; Java版本&#xff1a;8 BIO 概念 BIO(Block IO)&#xff0c;即同步阻塞IO&#xff0c;特点为当客户端发起请求后&#xff0c;在服务端未处理完该请求之前&#xff…...

网络安全(黑客)工作篇

一、网络安全行业的就业前景如何&#xff1f; 网络安全行业的就业前景非常广阔和有吸引力。随着数字化、云计算、物联网和人工智能等技术的迅速发展&#xff0c;网络安全的需求持续增长。以下是网络安全行业就业前景的一些关键因素&#xff1a; 高需求&#xff1a;随着互联网的…...

zookeeper入门学习

zookeeper入门学习 zookeeper应用场景 分布式协调组件 客户端第一次请求发给服务器2&#xff0c;将flag值修改为false&#xff0c;第二次请求被负载均衡到服务器1&#xff0c;访问到的flag也会是false 一旦有节点发生改变&#xff0c;就会通知所有监听方改变自己的值&#…...

VirtualEnv 20.24.0 发布

导读VirtualEnv 20.24.0 现已发布&#xff0c;VirtualEnv 用于在一台机器上创建多个独立的 Python 运行环境&#xff0c;可隔离项目之间的第三方包依赖&#xff0c;为部署应用提供方便&#xff0c;把开发环境的虚拟环境打包到生产环境即可&#xff0c;不需要在服务器上再折腾一…...

LabVIEW开发高压航空航天动力系统爬电距离的测试

LabVIEW开发高压航空航天动力系统爬电距离的测试 更多电动飞机MEA技术将发电&#xff0c;配电和用电集成到一个统一的系统中&#xff0c;提高了飞机的可靠性和可维护性。更多的电动飞机使用更多的电能来用电动替代品取代液压和气动系统。对车载电力的需求不断增加&#xff0c;…...

【论文阅读】基于深度学习的时序异常检测——Anomaly Transformer

系列文章链接 数据基础&#xff1a;多维时序数据集简介 论文一&#xff1a;2022 Anomaly Transformer&#xff1a;异常分数预测 论文二&#xff1a;2022 TransAD&#xff1a;异常分数预测 论文链接&#xff1a;Anomaly Transformer.pdf 代码链接&#xff1a;https://github.co…...

Java并发总结

1.创建线程三种方式 Runnable.Callable接口使用继承Thread类的方式创建多线程Runnable 和Callable区别 Callable规定&#xff08;重写&#xff09;的方法是call()&#xff0c;Runnable规定&#xff08;重写&#xff09;的方法是run()。Callable的任务执行后可返回值&#xff0…...

视频汇聚平台EasyCVR视频广场侧边栏支持拖拽

为了提升用户体验以及让平台的操作更加符合用户使用习惯&#xff0c;我们在EasyCVR v3.3版本中&#xff0c;支持面包屑侧边栏的广场视频、分组列表、收藏这三个模块拖拽排序&#xff0c;并且该操作在视频广场、视频调阅、电子地图、录像回放等页面均能支持。 TSINGSEE青犀视频…...

MyCat分片规则——范围分片、取模分片、一致性hash、枚举分片

1.范围分片 2.取模分片 范围分片和取模分片针对数字类型的字段可以&#xff0c;但是针对于字符串类型的字段时。这两种就不适用了。 3.一致性hash 4.枚举分片 默认节点指的是&#xff0c;如果我们向数据库表插入数据的时候&#xff0c;超出了这个枚举值&#xff0c;那么默认向…...

设计模式行为型——备忘录模式

目录 什么是备忘录模式 备忘录模式的实现 备忘录模式角色 备忘录模式类图 备忘录模式举例 备忘录模式代码实现 备忘录模式的特点 优点 缺点 使用场景 注意事项 实际应用 什么是备忘录模式 备忘录模式&#xff08;Memento Pattern&#xff09;又叫做快照模式&#x…...

Parquet存储的数据模型以及文件格式

文章目录 数据模型Parquet 的原子类型Parquet 的逻辑类型嵌套编码 Parquet文件格式 本文主要参考文献&#xff1a;Tom White. Hadoop权威指南. 第4版. 清华大学出版社, 2017.pages 363. Aapche Parquet是一种能有效存储嵌套数据的列式存储格式&#xff0c;在Spark中应用较多。 …...

Go和Java实现访问者模式

Go和Java实现访问者模式 我们下面通过一个解压和压缩各种类型的文件的案例来说明访问者模式的使用。 1、访问者模式 在访问者模式中&#xff0c;我们使用了一个访问者类&#xff0c;它改变了元素类的执行算法。通过这种方式&#xff0c;元素的执行算法可以随 着访问者改变而…...

想要通过软件测试的面试,都需要学习哪些知识

很多人认为&#xff0c;软件测试是一个简单的职位&#xff0c;职业生涯走向也不会太好&#xff0c;但是随着时间的推移&#xff0c;软件测试行业的变化&#xff0c;人们开始对软件测试行业的认知有了新的高度&#xff0c;越来越多的人开始关注这个行业&#xff0c;开始重视这个…...

MySQL的索引使用的数据结构,事务知识

一、索引的数据结构&#x1f338; 索引的数据结构&#xff08;非常重要&#xff09; mysql的索引的数据结构&#xff0c;并非定式&#xff01;&#xff01;&#xff01;取决于MySQL使用哪个存储引擎 数据库这块组织数据使用的数据结构是在硬盘上的。我们平时写的代码是存在内存…...

终极指南:如何在macOS上打造智能桌面歌词显示体验

终极指南&#xff1a;如何在macOS上打造智能桌面歌词显示体验 【免费下载链接】Lyrics Swift-based iTunes plug-in to display lyrics on the desktop. 项目地址: https://gitcode.com/gh_mirrors/lyr/Lyrics LyricsX是一款专为macOS用户设计的桌面歌词显示工具&#x…...

目标检测新手必看:如何用Python手写IOU计算函数(附完整代码)

目标检测实战&#xff1a;从零编写Python版IOU计算函数 刚接触目标检测时&#xff0c;最让人困惑的莫过于那些神秘的评估指标。其中IOU&#xff08;交并比&#xff09;就像一把尺子&#xff0c;能量化算法预测框与真实框的贴合程度。但纸上得来终觉浅&#xff0c;今天我们就用P…...

JeecgBoot低代码开发平台终极实战指南:从零开始构建企业级应用

JeecgBoot低代码开发平台终极实战指南&#xff1a;从零开始构建企业级应用 【免费下载链接】jeecg-boot jeecgboot/jeecg-boot 是一个基于 Spring Boot 的 Java 框架&#xff0c;用于快速开发企业级应用。适合在 Java 应用开发中使用&#xff0c;提高开发效率和代码质量。特点是…...

OpenClaw+Qwen3.5-4B-Claude:个人知识库自动更新系统

OpenClawQwen3.5-4B-Claude&#xff1a;个人知识库自动更新系统 1. 为什么需要自动化知识管理 作为一个技术从业者&#xff0c;我每天都会接触到大量信息——技术博客、论文摘要、行业动态、代码库更新等等。过去三年里&#xff0c;我尝试过各种笔记工具和知识管理方法&#…...

3步解锁数据自由:WeChatMsg让聊天记录成为数字资产

3步解锁数据自由&#xff1a;WeChatMsg让聊天记录成为数字资产 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChatMs…...

EVE舰船配置神器Pyfa全攻略:从新手到专家的实战指南

EVE舰船配置神器Pyfa全攻略&#xff1a;从新手到专家的实战指南 【免费下载链接】Pyfa Python fitting assistant, cross-platform fitting tool for EVE Online 项目地址: https://gitcode.com/gh_mirrors/py/Pyfa 在EVE Online的浩瀚宇宙中&#xff0c;每一位舰长都需…...

LeetDown完全指南:系统降级功能解决A6/A7设备用户的卡顿痛点

LeetDown完全指南&#xff1a;系统降级功能解决A6/A7设备用户的卡顿痛点 【免费下载链接】LeetDown a GUI macOS Downgrade Tool for A6 and A7 iDevices 项目地址: https://gitcode.com/gh_mirrors/le/LeetDown LeetDown是一款专为macOS设计的图形化降级工具&#xff0…...

Python内存泄漏分析实战指南(生产环境零停机排查全流程)

第一章&#xff1a;Python内存泄漏的本质与危害Python内存泄漏并非源于C语言中常见的“未释放malloc内存”&#xff0c;而是指对象被意外长期持有&#xff0c;导致垃圾回收器&#xff08;GC&#xff09;无法将其回收&#xff0c;从而持续占用堆内存。其本质是**引用关系的非预期…...

深度技术解析:IDM激活脚本(IAS)的注册表锁定机制与长期试用方案

深度技术解析&#xff1a;IDM激活脚本&#xff08;IAS&#xff09;的注册表锁定机制与长期试用方案 【免费下载链接】IDM-Activation-Script IDM Activation & Trail Reset Script 项目地址: https://gitcode.com/gh_mirrors/id/IDM-Activation-Script Internet Dow…...

MacBook Pro本地部署OpenClaw:百川2-13B量化模型7×24小时运行方案

MacBook Pro本地部署OpenClaw&#xff1a;百川2-13B量化模型724小时运行方案 1. 为什么选择MacBook Pro部署OpenClaw&#xff1f; 去年冬天&#xff0c;当我第一次尝试在MacBook Pro上部署量化版百川2-13B模型时&#xff0c;身边的朋友都觉得我疯了。"M1芯片能跑得动13B…...