Vue基础(2)响应式基础
一. reactive()
在 Vue3 中,可以使用 reactive() 创建一个响应式对象或数组:
<script setup>
import { reactive } from 'vue'const state = reactive({ count: 0 })
</script><template><button @click="state.count++">{{ state.count }}</button>
</template>
需要注意的是,reactive() 返回的是一个原始对象的 Proxy,它与原始对象是不相等的。只有代理对象是响应式的,更新原始对象并不会触发更新。
const row = {}
const proxy = reactive(raw)console.log( proxy === row) // false
reactive() 的局限性:
- 有限的值类型:reactive() 只能用于对象、数组等对象类型,而不能用于基础数据类型(string、number、boolean)
- 不能替换整个对象,会导致对初始引用的响应性连接丢失
<script setup>
import { reactive } from 'vue'let state = reactive({ count: 0 })
const increase = () => {state = { count: 1 } // state.count = 1 才能正确修改
}
</script><template><button @click="increase">{{ state.count }} <!-- 点击button,始终显示为0 --></button>
</template>
- 对解构操作不友好:将响应式对象的原始类型属性解构为本地变量时,或者将该属性传递给函数时,会丢失响应性。
<script setup>
import { reactive } from 'vue'let state = reactive({ count: 0 })
let { count } = stateconst increase = () => {count++
}
</script><template><button @click="increase">{{ state.count }} <!-- 点击button,始终显示为0 --></button>
</template>
二. ref()
ref() 将传入的参数包装成一个带有 value 属性的 ref 对象。在模板中使用 ref 时,不需要附加 .value。
<script setup>
import { ref } from 'vue'const count = ref(0)
console.log(count) // {value: 0},使用 count.value++
</script><template><button @click="count++">{{ count }} <!-- 无需.value --></button>
</template>
ref() 的参数一般时基础数据类型,也可以是对象类型。如果参数是对象类型,系统会自动将 ref 转成 reactive。
<script setup>
import { ref } from 'vue'const state = ref({ count: 0 })
console.log(state.value) // Proxy(object) {count: 0}
const increase = () => {state.value.count++
}
</script><template><button @click="increase"> <!-- state.count++ -->{{ state.count }} <!-- 无需.value --></button>
</template>
一个包含对象的 ref 可以响应式地替换整个对象:
<script setup>
import { ref } from 'vue'const state = ref({ count: 0 })
const increase = () => {state.value = { count: 1 }
}
</script><template><button @click="increase"> {{ state.count }} <!-- 点击button后由0变为1 --></button>
</template>
相关文章:
Vue基础(2)响应式基础
一. reactive() 在 Vue3 中,可以使用 reactive() 创建一个响应式对象或数组: <script setup> import { reactive } from vueconst state reactive({ count: 0 }) </script><template><button click"state.count">{…...
Mysql基础教程(15):别名
MySQL 别名 在本文中,我们讨论了 MySQL 中的列别名,表别名和派生表别名,以及使用别名来简化 SQL 和提高 SQL 的可读性。 如果在一个 SQL 中涉及到多个表,我们需要使用 table_name.column_name 这样的方式来引用每个表的字段&…...
SpringCloud 微服务中网关如何记录请求响应日志?
在基于SpringCloud开发的微服务中,我们一般会选择在网关层记录请求和响应日志,并将其收集到ELK中用作查询和分析。 今天我们就来看看如何实现此功能。 日志实体类 首先我们在网关中定义一个日志实体,用于组装日志对象 Data public class …...
【运维项目经历|028】Cobbler自动化部署平台构建项目
🍁博主简介: 🏅云计算领域优质创作者 🏅2022年CSDN新星计划python赛道第一名 🏅2022年CSDN原力计划优质作者 🏅阿里云ACE认证高级工程师 🏅阿里云开发者社区专…...
“物联网安全:万物互联背景下的隐私保护与数据安全策略“
在物联网(IoT)时代,随着智能设备的普及和万物互联的加速,隐私保护与数据安全成为了亟待解决的关键问题。以下是一些重要的隐私保护与数据安全策略,以确保在万物互联背景下信息的安全: 1. 加强设备安全&…...
LeetCode216组合总和3
题目描述 找出所有相加之和为 n 的 k 个数的组合,且满足下列条件:只使用数字1到9。每个数字 最多使用一次。返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次,组合可以以任何顺序返回。 解析 递归加剪枝,搜索长度达…...
微软找腾讯接盘,Windows直接安装手机APP体验起飞了
熟悉微软的同学都知道微软有个传统艺能——什么好用砍什么。 比如 Win10 砍掉了还算方便的小娜,推出 Win11 砍掉了 Win10 上面好用的磁贴功能等。 上一秒用户还在夸奖点赞。 下一秒就给你砍掉,顺带还塞一堆 BUG 给你。 但没办法,PC 近乎垄断…...
【Springcloud微服务】MybatisPlus下篇
🔥 本文由 程序喵正在路上 原创,CSDN首发! 💖 系列专栏:Springcloud微服务 🌠 首发时间:2024年6月4日 🦋 欢迎关注🖱点赞👍收藏🌟留言ὃ…...
i18n-demo
一、demo 1、资源文件准备 如我需要对menu、logMsg内容做国际化。 resources下放各个语言文件,直接放resources下都行。我是新建了一个myi18n文件夹, (1)然后在myi18n上点击New--Resource Bundle (2)在…...
[Leetcode] 0-1背包和完全背包
46. 携带研究材料 纯01背包(非应用):只能选择一次物品 dp[j]:容量为j的背包所能装的最大容量 容量需要倒序 416. 分割等和子集 能否装满 dp[j]:容量为j的背包所能装的最大容量 1049. 最后一块石头的重量 II 尽可…...
自定义类型:联合体和枚举
1. 联合体类型的声明 2. 联合体的特点 3. 联合体大小的计算 4. 枚举类型的声明 5. 枚举类型的优点 6. 枚举类型的使用 欢迎关注 熬夜学编程 创作不易,请多多支持 感谢大家的阅读、点赞、收藏和关注 如有问题,欢迎指正 1. 联合体 1.1 联合体类型的声…...
【Cityengine】Cityengine生产带纹理的建筑模型导入UE4/UE5(下)
【Cityengine】Cityengine生产带纹理的建筑模型导入UE4/UE5(下) 一、导出数据(2022中文版案例)二、安装datasmith插件三、导入数据四、检查导入材质是否正常五、编辑替换材质六、安装模型编辑插件七、编辑替换建筑规则 一、导出数…...
详解51种企业应用架构模式
导读:企业应用包括哪些?它们又分别有哪些架构模式?世界著名软件开发大师Martin Fowler给你答案 01、什么是企业应用 我的职业生涯专注于企业应用,因此,这里所谈及的模式也都是关于企业应用的。(企业应用还…...
【十年java搬砖路】Jumpserver docker版安装及配置Ldap登陆认证
Jumpserver docker 安装启动教程 拉取镜像 docker pull JumpServer启动进行前确保有Redis 和Mysql 创建jumperServer数据库 在MYSQL上执行 创建数据库 登陆MYSQL mysql -u root -p 创建Jumperserveri库 create database jumpserver default charset utf8mb4;可以为jumperSe…...
C\C++内存管理(未完结)
文章目录 一.C\C内存分布二.C语言中动态内存管理方式:malloc/calloc/realloc/free三.C内存管理方式3.1.new/delete操作内置类型3.2.new和delete操作自定义类型 四.operator new与operator delete函数(重要点进行讲解)4.1. operator new与oper…...
一个小时搞定JAVA面向对象(5)——抽象与接口
文章目录 抽象抽象的注意事项static\final\private是否可以修饰抽象方法继承和抽象知识点回顾 接口接口实现总结抽象方法默认方法静态方法成员变量接口的特点接口和抽象类的区别 抽象 关键字: abstract 抽象方法: 修饰符 abstract 返回值类型 方法名(参数); 抽象类: public a…...
图像关键特征描述方法-小目标
图像关键特征描述方法主要包括以下几种: SIFT(尺度不变特征变换): SIFT是一种广泛使用的特征描述方法,它通过尺度空间和梯度方向直方图来描述图像中的关键点。SIFT特征描述具有尺度不变性和旋转不变性,对于光照和视角变化也具有一定的鲁棒性。 SURF(加速稳健特征): SURF…...
【qt15】windeployqt 安装依赖
debug模式vs可以使用qt插件新建qt文件 D:\Qt15\5.15.2\msvc2019\bin\windeployqt.exe Warning: Cannot find Visual Studio installation directory, VCINSTALLDIR is not set.D:\Qt15\5.15.2\msvc2019\bin\windeployqt.exe .\filecopier.exeWindows PowerShell Copyright (C) …...
DETR论文重点
DETR就是 DEtection TRansformer 的缩写。 论文原名:End-to-End Object Detection with Transoformers。 重点有两个:端到端、Transformer结构 论文概述 注意:斜体的文字为论文原文,其他部分内容则是为增进理解而做的解释。 …...
slf4j等多个jar包冲突绑定的排查方法使用IDEA的maven help解决
1.安装 2.使用maven help解决,找到对应包存在的冲突 使用exclude直接解决即可...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像(比如分辨率3000*3000的图像)的办法,尤其是想把内存中的裸数据(只有图像的数据,不包…...
【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具:make/makfile 1.背景 在一个工程中源文件不计其数,其按类型、功能、模块分别放在若干个目录中,mak…...
门静脉高压——表现
一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构:由肠系膜上静脉和脾静脉汇合构成,是肝脏血液供应的主要来源。淤血后果:门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血,引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...
