《Vue进阶教程》第四课:reactive()函数详解
往期内容:
《Vue零基础入门教程》合集(完结)
《Vue进阶教程》第一课:什么是组合式API
《Vue进阶教程》第二课:为什么提出组合式API
《Vue进阶教程》第三课:Vue响应式原理
通过前面的学习, 我们了解到reactive可以将一个普通对象转换成响应式对象.
那么, 接下来我们就详细研究一下这个函数.
研究函数主要从这样三个方面
- 输入, 也就是参数
- 作用, 做了什么
- 输出, 也就是返回值
- 参数: 只能是引用类型数据, 不能是值类型数据
- 作用: 创建传入对象的
深层代理, 并返回代理后的对象 - 返回值: 一个Proxy代理对象
1) 深层代理
不管传入的对象存在多少层嵌套(对象套对象的情况), 每一层都具有响应性
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><script>const { reactive, effect } = Vueconst pState = reactive({name: 'xiaoming',age: 20,gf: {name: 'xiaomei',city: {name: 'wuhan',},},})effect(() => {console.log(`${pState.name}的女朋友叫${pState.gf.name}, 在${pState.gf.city.name}`)})setTimeout(() => {console.log('过了一段时间, 她去了beijing')// 不管嵌套多少层, 都具有响应性pState.gf.city.name = 'beijing'}, 1000)</script></body>
</html>
2) 重复代理
- 对同一个普通对象, 多次代理, 返回的结果唯一
- 对代理后的对象再次代理, 返回的结果唯一
以上, 可以理解为单例模式, reactive创建的代理对象只会存在一个
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><script>const { reactive, effect } = Vueconst state = { name: 'xiaoming' }const p1 = reactive(state)const p2 = reactive(state)// 对同一个对象多次代理, 返回的结果唯一console.log(p1 === p2) // trueconst p3 = reactive(p1)// 对代理后的对象, 再次代理, 返回的结果唯一console.log(p3 === p1) // true</script></body>
</html>
3) 局限性
- 传入参数只能是对象
- 解构或者赋值操作会丢失响应性
示例1
解构赋值后的变量没有响应性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"></div><script>const { reactive, effect } = Vueconst pState = reactive({ name: 'xiaoming' })// 对代理对象进行解构let { name } = pStateeffect(() => {app.innerHTML = pState.name})setTimeout(() => {name = 'xiaomei'console.log('对解构后的name操作, 不会触发响应式')}, 1000)</script></body>
</html>
示例2
赋值操作丢失响应性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"></div><script>const { reactive, effect } = Vuelet todos = reactive([])effect(() => {app.innerHTML = JSON.stringify(todos)})// 模拟向接口请求setTimeout(() => {// 将接口返回的数据赋值给todos, 导致todos丢失了响应性todos = [{ id: 1, content: 'todo-1' },{ id: 2, content: 'todo-2' },]}, 1000)</script></body>
</html>
相关文章:
《Vue进阶教程》第四课:reactive()函数详解
往期内容: 《Vue零基础入门教程》合集(完结) 《Vue进阶教程》第一课:什么是组合式API 《Vue进阶教程》第二课:为什么提出组合式API 《Vue进阶教程》第三课:Vue响应式原理 通过前面的学习, 我们了解到r…...
【开源】A065—基于SpringBoot的库存管理系统的设计与实现
🙊作者简介:在校研究生,拥有计算机专业的研究生开发团队,分享技术代码帮助学生学习,独立完成自己的网站项目。 代码可以查看项目链接获取⬇️,记得注明来意哦~🌹 赠送计算机毕业设计600个选题ex…...
memmove函数(带图详解)
c语言系列 文章目录 c语言系列一、memmove函数介绍1.1、函数基本功能1.2、函数参数2.3、函数返回值 二、memmove的使用2.1、拷贝字节不可大于目标空间2.2、同一空间拷贝 三、函数功能的模拟实现3.1、函数参数及其返回值的设定3.2、函数体实现 四、代码实现 一、memmove函数介绍…...
【Java数据结构】时间和空间复杂度
本章开始将进入数据结构的知识,时间复杂度主要衡量的是一个算法的运行速度,而空间复杂度主要衡量一个算法所需要的额外空间,。 时间复杂度 算法中执行的次数决定了时间复杂度。 在计算执行次数时,只需要计算大概的次数ÿ…...
八斗深度学习
八斗深度学习第二周笔记 一、深度学习步骤:1. 选定模型结构2. 模型参数随机初始化3. 构造模型损失函数4. 选择优化算法并设置超参数5. 数据准备与预处理6. 训练模型7. 模型评估8. 测试模型9. 应用模型 损失函数极小值、导向意义 超参数的影响迭代次数epoch批次量大小…...
安卓报错Switch Maven repository ‘maven‘....解决办法
例如:Switch Maven repository ‘maven(http://developer.huawei.com/repo/)’ to redirect to a secure protocol 在库链接上方添加配置代码:allowInsecureProtocol true...
Scala编程技巧:正则表达式与隐式转换
1. 引言 在Scala编程中,正则表达式和隐式转换是处理字符串匹配和类型转换的强大工具。本文将通过一个实用的示例——电话号码和身份证号码验证器,来展示如何使用这些工具。 2. 知识概括 2.1 正则表达式基础 正则表达式是用于字符串搜索和匹配的强大工…...
UnityShaderLab 实现黑白着色器效果
实现思路:取屏幕像素的RGB值,将三个通道的值相加,除以一个大于值使颜色值在0-1内,再乘上一个强度值调节黑白强度。 在URP中实现需要开启Opaque Texture ShaderGraph实现: ShaderLab实现: Shader "Bl…...
在Windows 10中使用SSH远程连接服务器(附花生壳操作方法)
SSH 在 linux 中是一种重要的系统组件,用户可以使用 SSH 来远程连接 linux 系统的计算机,或者传输文件。不过在 win10 以前,windows 并不原生支持 SSH,需要借助第三方工具来使用 SSH 功能。而实际上,微软在 2015 年就曾…...
在算网云平台云端在线部署stable diffusion (0基础小白超详细教程)
Stable Diffusion无疑是AIGC领域中的AI绘画利器,具有以下显著优势: 1、开源性质,支持本地部署 2、能够实现对图像生成过程的精确控制 虽然SD在使用上有很多的有点,但缺点也是不言而喻的,由于AI绘画的整个过程以及现…...
ubuntu存储空间不足快速解决
几个自己常用的释放空间命令,备忘 将文件夹下的文件按从大到小排列 ls -lhS /var/log/syslog 过大 sudo truncate -s 0 /var/log/syslog /var/log/Xorg.0.log.old过大 sudo truncate -s 0 /var/log/Xorg.0.log.old 清理系统日志文件: sudo journalctl --…...
Prescan simulink carsim联合仿真平台搭建问题总结
解决办法主要来自忠厚的老王:自动驾驶决策规划算法第二章第一节 决策规划仿真平台搭建_哔哩哔哩_bilibili 这部分直接复制的老王视频的: Q1:prescan安装了,但是找不到Demo_Carsim3D A1:这个文件夹是我自己建立的不是prescan自带的࿰…...
STM32(HAL_工程模板的搭建)
目录 一、准备文件 二、创建工程 三、创建分组 四、配置文件处理 五、编译错误处理 一、准备文件 准备HAL库文件: ST官网( 意法半导体-STMicroelectronics )搜索STM32Cube, 本文使用“STM32Cube_FW_F4_V1.24.1” 版本的HAL库, 使用的是F4的库文件。 创建文件:…...
Flask入门一(介绍、Flask安装、Flask运行方式及使用、虚拟环境、调试模式、配置文件、路由系统)
文章目录 一、Flask介绍二、Flask创建和运行 1.安装2.快速使用3.Flask小知识4.flask的运行方式 三、Werkzeug介绍四、Jinja2介绍五、Click CLI 介绍六、Flask安装 介绍watchdog使用python–dotenv使用(操作环境变量) 七、虚拟环境 介绍Mac/linux创建虚拟…...
CAD C# 批量替换当前图中块
本案例功能为选择当前文档中一个块(旧块),然后选择新图元(新块),运行插件后新块将替换图中所有的旧块。 效果如下: public static class Class1{//选取对象替换块定义[CommandMethod("TT&…...
Android -- [SelfView] 自定义多行歌词滚动显示器
Android – [SelfView] 自定义多行歌词滚动显示器 流畅、丝滑的滚动歌词控件* 1. 背景透明;* 2. 外部可控制进度变化;* 3. 支持屏幕拖动调节进度(回调给外部);效果 歌词文件(.lrc) 一. 使用…...
vscode 配置C/C++环境控制台参数
您可以通过以下步骤在VS Code中配置C/C环境的控制台参数: 1,打开VS Code并进入您的C/C项目 2,点击左侧的"调试"图标,然后点击顶部的齿轮图标,选择“launch.json”。 3,在"launch.json&qu…...
【HarmonyOS学习日志(13)】计算机网络之TCP/IP协议族(二)
文章目录 TCP/IP协议族ARPDNS标志字段:协商具体的通信方式和反馈通信状态DNS查询问题的格式资源记录(Resource Record, RR)格式:被用于应答字段、授权字段和额外信息字段 IP协议IP服务的特点无状态无连接不可靠 IP头部结构IPv4头部…...
多系统对接的实现方案技术分析
前言 随着信息化和大数据时代的到来,数据资产变得至关重要,企业纷纷上线多种软件系统和移动端应用以适应这一变化。这些系统和应用虽然发挥了各自的优势,但也导致了信息孤岛问题。为了解决这一问题,数据中台和异构系统集成技术应…...
kv类型算子使用
对kv类型的RDD数据集进行操作。 keys """ 获取所有的key转换算子"""inputRdd sc.parallelize([(laoda, 11), (laoer, 22), (laosan, 33), (laosi, 44)]) print(inputRdd.keys().collect()) # [laoda, laoer, laosan, laosi] values "&…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...
嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...
Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目,该项目是一个 Spring AI 快速入门的样例工程项目,旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计,每个模块都专注于特定的功能领域,便于学习和…...
