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

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 中&#xff0c;可以使用 reactive() 创建一个响应式对象或数组&#xff1a; <script setup> import { reactive } from vueconst state reactive({ count: 0 }) </script><template><button click"state.count">{…...

Mysql基础教程(15):别名

MySQL 别名 在本文中&#xff0c;我们讨论了 MySQL 中的列别名&#xff0c;表别名和派生表别名&#xff0c;以及使用别名来简化 SQL 和提高 SQL 的可读性。 如果在一个 SQL 中涉及到多个表&#xff0c;我们需要使用 table_name.column_name 这样的方式来引用每个表的字段&…...

SpringCloud 微服务中网关如何记录请求响应日志?

在基于SpringCloud开发的微服务中&#xff0c;我们一般会选择在网关层记录请求和响应日志&#xff0c;并将其收集到ELK中用作查询和分析。 今天我们就来看看如何实现此功能。 日志实体类 首先我们在网关中定义一个日志实体&#xff0c;用于组装日志对象 Data public class …...

【运维项目经历|028】Cobbler自动化部署平台构建项目

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…...

“物联网安全:万物互联背景下的隐私保护与数据安全策略“

在物联网&#xff08;IoT&#xff09;时代&#xff0c;随着智能设备的普及和万物互联的加速&#xff0c;隐私保护与数据安全成为了亟待解决的关键问题。以下是一些重要的隐私保护与数据安全策略&#xff0c;以确保在万物互联背景下信息的安全&#xff1a; 1. 加强设备安全&…...

LeetCode216组合总和3

题目描述 找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a;只使用数字1到9。每个数字 最多使用一次。返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次&#xff0c;组合可以以任何顺序返回。 解析 递归加剪枝&#xff0c;搜索长度达…...

微软找腾讯接盘,Windows直接安装手机APP体验起飞了

熟悉微软的同学都知道微软有个传统艺能——什么好用砍什么。 比如 Win10 砍掉了还算方便的小娜&#xff0c;推出 Win11 砍掉了 Win10 上面好用的磁贴功能等。 上一秒用户还在夸奖点赞。 下一秒就给你砍掉&#xff0c;顺带还塞一堆 BUG 给你。 但没办法&#xff0c;PC 近乎垄断…...

【Springcloud微服务】MybatisPlus下篇

&#x1f525; 本文由 程序喵正在路上 原创&#xff0c;CSDN首发&#xff01; &#x1f496; 系列专栏&#xff1a;Springcloud微服务 &#x1f320; 首发时间&#xff1a;2024年6月4日 &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43…...

i18n-demo

一、demo 1、资源文件准备 如我需要对menu、logMsg内容做国际化。 resources下放各个语言文件&#xff0c;直接放resources下都行。我是新建了一个myi18n文件夹&#xff0c; &#xff08;1&#xff09;然后在myi18n上点击New--Resource Bundle &#xff08;2&#xff09;在…...

[Leetcode] 0-1背包和完全背包

46. 携带研究材料 纯01背包&#xff08;非应用&#xff09;&#xff1a;只能选择一次物品 dp[j]&#xff1a;容量为j的背包所能装的最大容量 容量需要倒序 416. 分割等和子集 能否装满 dp[j]&#xff1a;容量为j的背包所能装的最大容量 1049. 最后一块石头的重量 II 尽可…...

自定义类型:联合体和枚举

1. 联合体类型的声明 2. 联合体的特点 3. 联合体大小的计算 4. 枚举类型的声明 5. 枚举类型的优点 6. 枚举类型的使用 欢迎关注 熬夜学编程 创作不易&#xff0c;请多多支持 感谢大家的阅读、点赞、收藏和关注 如有问题&#xff0c;欢迎指正 1. 联合体 1.1 联合体类型的声…...

【Cityengine】Cityengine生产带纹理的建筑模型导入UE4/UE5(下)

【Cityengine】Cityengine生产带纹理的建筑模型导入UE4/UE5&#xff08;下&#xff09; 一、导出数据&#xff08;2022中文版案例&#xff09;二、安装datasmith插件三、导入数据四、检查导入材质是否正常五、编辑替换材质六、安装模型编辑插件七、编辑替换建筑规则 一、导出数…...

详解51种企业应用架构模式

导读&#xff1a;企业应用包括哪些&#xff1f;它们又分别有哪些架构模式&#xff1f;世界著名软件开发大师Martin Fowler给你答案 01、什么是企业应用 我的职业生涯专注于企业应用&#xff0c;因此&#xff0c;这里所谈及的模式也都是关于企业应用的。&#xff08;企业应用还…...

【十年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语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free三.C内存管理方式3.1.new/delete操作内置类型3.2.new和delete操作自定义类型 四.operator new与operator delete函数&#xff08;重要点进行讲解&#xff09;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 的缩写。 论文原名&#xff1a;End-to-End Object Detection with Transoformers。 重点有两个&#xff1a;端到端、Transformer结构 论文概述 注意&#xff1a;斜体的文字为论文原文&#xff0c;其他部分内容则是为增进理解而做的解释。 …...

slf4j等多个jar包冲突绑定的排查方法使用IDEA的maven help解决

1.安装 2.使用maven help解决&#xff0c;找到对应包存在的冲突 使用exclude直接解决即可...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...