vue3-响应式基础之reactive
reactive()
还有另一种声明响应式状态的方式,即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同,reactive() 将使对象本身具有响应性:
-
「点击按钮+1」
<script lang="ts" setup>
import { reactive } from 'vue'const state = reactive({ count: 0 })</script><template><div class="container"><button @click="state.count++">点击次数加+1 : {{ state.count }}</button></div>
</template><style lang="scss" scoped>
.container {}
</style>
-
「示例效果」

响应式对象是 JavaScript 代理,其行为就和普通对象一样。不同的是,Vue 能够拦截对响应式对象所有属性的访问和修改,以便进行依赖追踪和触发更新。
reactive() 将深层地转换对象:当访问嵌套对象时,它们也会被 reactive() 包装。当 ref 的值是一个对象时,ref() 也会在内部调用它。与浅层 ref 类似,这里也有一个 shallowReactive() API 可以选择退出深层响应性。
-
reactive() 返回的是一个原始对象的 Proxy,它和原始对象是不相等的
const raw = {}
const proxy = reactive(raw)// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false
只有代理对象是响应式的,更改原始对象不会触发更新。
因此,使用 Vue 的响应式系统的最佳实践是 「仅使用你声明对象的代理版本」。
-
为保证访问代理的一致性,对同一个原始对象调用 reactive() 会总是返回同样的代理对象,而对一个已存在的代理对象调用 reactive() 会返回其本身:
// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true
这个规则对嵌套对象也适用。依靠深层响应性,响应式对象内的嵌套对象依然是代理:
const proxy = reactive({})const raw = {}
proxy.nested = rawconsole.log(proxy.nested === raw) // false
reactive() 的局限性
-
有限的值类型:它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。
-
不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象,因为这样的话与第一个引用的响应性连接将丢失:
let state = reactive({ count: 0 })// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失!)
state = reactive({ count: 1 })
-
对解构操作不友好:当我们将响应式对象的原始类型属性解构为本地变量时,或者将该属性传递给函数时,我们将丢失响应性连接:
const state = reactive({ count: 0 })// 当解构时,count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)
由于这些限制,我们建议使用 ref() 作为声明响应式状态的主要 API。
额外的 ref 解包细节
-
作为 reactive 对象的属性 一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。换句话说,它的行为就像一个普通的属性:
const count = ref(0)
const state = reactive({count
})console.log(state.count) // 0state.count = 1
console.log(count.value) // 1
-
如果将一个新的 ref 赋值给一个关联了已有 ref 的属性,那么它会替换掉旧的 ref:
const otherCount = ref(2)state.count = otherCount
console.log(state.count) // 2
// 原始 ref 现在已经和 state.count 失去联系
console.log(count.value) // 1
只有当嵌套在一个深层响应式对象内时,才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。
数组和集合的注意事项
与 reactive 对象不同的是,当 ref 作为响应式数组或原生集合类型(如 Map) 中的元素被访问时,它不会被解包:
const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value 访问
console.log(map.get('count').value)//输出0new Map([['count', ref(0)]] 这个理解起来就是
访问 key为count的对应value值
也就是一组键值对的结构,具有极快的查找速度。
ref自动解包就是无需加上.value访问,比如在模版中使用会自动解包{{msg}}
不会自动解包 就是需要再后面加上一个.value才能访问到值
Map是ES6规范引入新的数据类型。
相关文章:
vue3-响应式基础之reactive
reactive() 还有另一种声明响应式状态的方式,即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同,reactive() 将使对象本身具有响应性: 「点击按钮1」 <script lang"ts" setup> import { reactive } from vuec…...
【ceph】如何将osd的内容挂载出来---ceph-objectstore-tool 实现
本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》:python零基础入门学习 《python运维脚本》: python运维脚本实践 《shell》:shell学习 《terraform》持续更新中:terraform_Aws学习零基础入门到最佳实战 《k8…...
怎样实现安全便捷的网间数据安全交换?
数据安全交换是指在数据传输过程中采取一系列措施来保护数据的完整性、机密性和可用性。网间数据安全交换,则是需要进行跨网络、跨网段甚至跨组织地进行数据交互,对于数据的传输要求会更高。 大部分企业都是通过网闸、DMZ区、VLAN、双网云桌面等方式实现…...
微信小程序定义并获取日志/实时log信息
步骤一:开通实时日志 可以在开发者工具->详情->性能质量->实时日志,点击前往,在浏览器打开we分析界面: 也可登录小程序管理后台,点击统计进入we分析: 在we分析界面找到性能质量,打开实…...
海外代理IP怎么用?常见使用问题及解决方案
海外代理IP是指提供全球范围内的代理服务器,代理服务器充当IP与目标网站之间的中介,可以起到安全匿名、提高网速、突破网络壁垒的作用。在使用代理IP的过程中,用户可能会遇到各种挑战,如连接问题、速度慢等。理解这些问题的原因并…...
DP:数位DP
数位DP的大致思想:枚举每一位能选取的合法值。 1. LC 2376 统计特殊整数 说是DP,但实际上状态转移方程挺难写的,毕竟是枚举集合论,这里就不贴状态转移方程了。总体的写法其实是搜索记忆化。之所以称之为DP,是因为&am…...
js逆向第21例:猿人学第20题新年挑战
文章目录 一、前言二、定位加密参数1、定位wasm加密2、反编译wasm3、定位sign加密三、代码实现四、参考文献一、前言 新春福利:抓取这5页的数字,计算加和并提交结果 二、定位加密参数 通过get请求地址可以看到需要搞定参数有page、sign、t如下图: 进入堆栈不难发现这样一…...
贪心+蓝桥杯
原题路径 题目思路 : 思路很简单,肯定是贪心做法,要使总代价最小,需用那些出现次数比avg多的数来替换那些没有出现或者是出现次数少于avg的数, 所以我们存当前数每次出现的代价是多少 ,枚举每一个 0 - 9 之间的数 ,如果当前数出现…...
第二篇:新建node项目并运行
🎬 江城开朗的豌豆:个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 📝 个人网站 :《 江城开朗的豌豆🫛 》 ⛺️ 生活的理想,就是为了理想的生活 ! 安装 Node.js:首先,确保你的…...
阳光保险选择OceanBase稳定运行超700天
阳光保险集团成立于 2005 年 7 月,旗下拥有财产保险、人寿保险、信用保证保险、资产管理等多家专业子公司,是全球市场化企业中成长最快的集团公司之一,目前位列中国保险行业前八。随着数字化升级趋势的不断加速,很多企业产生将软硬…...
最强大脑闪电心算草稿1
#include<bits/stdc.h> #include<windows.h> using namespace std; int main() {double speed,n,op,sum0;int ans;srand(time(NULL));cout<<"请输入加(1)/减(2)/加减混合(3):";cin>>op;cout<<"请输入题目数量:";cin>>…...
融优学堂-艺术史
导论4 1.【单选题】根据导论的讲解,下列表述正确的是()。(1)艺术品是因人的活动而被创造出来的人工制品。(2)许多物品被制造出来时,最初的目的是满足某种实用的用途,而不…...
༺༽༾ཊ—设计-七个-07-原则-模式—ཏ༿༼༻
第七原则:迪米特职责 类与类之间的耦合度尽可能低 换言之,我们可以理解成———只与直接朋友说话,不跟陌生人说话 直接朋友: 通过方法传参传进来的朋友, 类自己的字段, 构造函数进来的也是直接朋友&…...
一篇文章带你搞懂---全排序
顾得泉:个人主页 个人专栏:《Linux操作系统》 《C/C》 《LeedCode刷题》 键盘敲烂,年薪百万! 全排序(Permutation)是指将一组元素按照一定的顺序进行排列的过程。在计算机科学中,全排序是一…...
提升问题检索的能力
事实上,在信息极度丰富的时代,信息检索和筛选能力格外重要。一些搜索引擎的出现已极大地方便了我们日常的信息检索,此处需要注意的是我们不能仅仅局限于常见的搜索引擎,也需要关注和积累一些专业平台或是具有集成功能的引擎&#…...
软件测试|SQLAlchemy query() 方法查询数据
简介 上一篇文章我们介绍了SQLAlchemy 的安装和基础使用,本文我们来详细介绍一下如何使用SQLAlchemy的query()方法来高效的查询我们的数据。 创建模型 我们可以先创建一个可供我们查询的模型,也可以复用上一篇文章中我们创建的模型,代码如…...
FlinkCDC的分析和应用代码
前言:原本想讲如何基于Flink实现定制化计算引擎的开发,并以FlinkCDC为例介绍;发现这两个在表达上不知以谁为主,所以先分析FlinkCDC的应用场景和技术实现原理,下一篇再去分析Flink能在哪些方面,做定制化计算…...
序章 搭建环境篇—准备战士的剑和盾
第一步:安装node.js Node.js 内置了npm,只要安装了node.js,就可以直接使用 npm,官网地址: Download | Node.js 在这里不建议安装最新版本的node.js,可以选跟我一样的版本,node版本v16.13.2 链…...
【C++】vector的使用及模拟实现
目录 一、vector的介绍及使用1.1 介绍vector1.2 vector的使用1.2.1 构造1.2.2 遍历访问1.2.3 容量空间1.2.4 增删查改 二、vector的模拟实现2.1 成员变量2.2 迭代器相关函数2.3 构造-析构-赋值重载2.3.1 无参构造2.3.2 有参构造12.3.3 有参构造22.3.4 拷贝构造2.3.5 赋值重载2.…...
【数据库】sql优化有哪些?从query层面和数据库层面分析
目录 归纳sql本身的优化数据库层面的优化 归纳 这类型问题可以称为:Query Optimization,从清华AI4DB的paper list中,该类问题大致可以分为: Query RewriterCardinality EstimationCost EstimationPlan Optimization 从中文的角…...
RuoYi登录三步自动化:验证码、加密密码与Cookie状态机
1. 这不是“写个脚本”,而是后台系统登录链路的完整逆向工程RuoYi 是国内 Java 后台开发中使用频率极高的开源框架,它不是玩具项目,而是真实企业级系统落地的“最小可行基座”——权限控制、菜单管理、代码生成、定时任务、日志审计ÿ…...
前缀和与差分进阶总结 | 技巧归纳与实战应用
前缀和与差分进阶总结 | 技巧归纳与实战应用 引言 前缀和与差分是数组处理中两种重要且互补的技术。它们看似简单,却在 LeetCode 和实际工程中有着广泛的应用。前缀和将区间查询从 O(n) 优化到 O(1),差分将区间更新从 O(n) 优化到 O(1)。两者的结合使用可…...
nvm-setup安装步骤详解
nvm-setup是 Node Version Manager(Node.js 版本管理器) 的安装包。装了它,你就能在一台电脑上随时切换多个 Node.js 版本,做前端开发、跑不同项目的必备工具。一、准备工作安装包下载:https://wwbkk.lanzoub.com/iU…...
ThingsVis v1.1.15 版本更新:补齐嵌入与运维体验短板,多场景集成更可靠
ThingsVis v1.1.15:嵌入与运维体验的全面升级ThingsVis v1.1.15 版本以 ThingsVis 嵌入能力和设备详情页体验为核心进行更新。在 ThingsVis 嵌入方面,支持全屏、自动播放、剪贴板写入权限,修复 iframe 无法全屏问题;在设备详情页&…...
水壶装箱检测怎么做?一个独立开发者的实战经验
水壶装箱检测怎么做?一个独立开发者的实战经验 作者:馒头 | 离散型智能制造项目经理 MES开发2年 项目经理3年,主导过电子、机械行业的百万级MES项目。 独立开发过一套装箱检测系统,从需求分析到上线落地全程主导。 踩过的坑、走过…...
Linux操作系统安装图文配置教程详细版
随着嵌入式的发展,Linux的知识是必须的一部分,下面就让我们进行Linux系统的安装过程演示:一、 Linux的安装在此博客中以红旗(Red Flag)Asianux Workstation 3为例进行描述,其他版本的Linux与此相似。 1.1 安…...
矿山灾害应急回溯:UWB离线即失联,无感定位全程轨迹留存
矿山灾害应急回溯:UWB离线即失联,无感定位全程轨迹留存矿山井下塌方、瓦斯超限、透水、顶板垮落等突发性灾害具备极强不可预判性,灾害发生后极易伴随断电断网、通信中断、组网瘫痪等状况。应急轨迹回溯、人员位置核查、救援路线规划ÿ…...
工业视觉光源颜色选型全攻略|白/红/蓝/绿光适用场景、原理与避坑细则
摘要:在工业AI视觉缺陷检测项目落地中,绝大多数工程师过度聚焦相机参数、镜头焦距、模型调参优化,却忽略了光源颜色选型这一核心前置条件。工业检测有一条公认铁律:成像决定上限,模型只负责兜底。相同工件、相同光源结…...
OAuth 2.0 client_id深度解析:从规范到安全实践
1. 引言:一个字符串背后的身份体系 在 OAuth 2.0 的整个生态里,client_id 是出现频率最高却最容易被忽视的参数之一。它几乎出现在每一个授权请求的 URL 里,开发者往往只是将其视为"配置项",从 IdP 控制台粘贴过来填进…...
华大半导体三大产品线深度解析:安全控制、汽车电子与功率芯片实战指南
1. 项目概述:一次关于“中国芯”的深度现场探访最近,我有机会近距离接触了华大半导体的产品展示与技术交流活动。当“聚焦三大产品线,华大半导体展示最强‘中国芯’!”这个标题映入眼帘时,我内心的第一反应是ÿ…...
