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

《Vue进阶教程》第四课：reactive()函数详解

news 文章来源：https://blog.csdn.net/2401_84715637/article/details/144367912 2025/1/18 17:12:48

  往期内容：

《Vue零基础入门教程》合集（完结）

《Vue进阶教程》第一课：什么是组合式API

《Vue进阶教程》第二课：为什么提出组合式API

《Vue进阶教程》第三课：Vue响应式原理

通过前面的学习, 我们了解到reactive可以将一个普通对象转换成响应式对象.

那么, 接下来我们就详细研究一下这个函数.

研究函数主要从这样三个方面

  1. 输入, 也就是参数
  2. 作用, 做了什么
  3. 输出, 也就是返回值
  1. 参数: 只能是引用类型数据, 不能是值类型数据
  2. 作用: 创建传入对象的深层代理, 并返回代理后的对象
  3. 返回值: 一个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) 重复代理

  1. 对同一个普通对象, 多次代理, 返回的结果唯一
  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. 传入参数只能是对象
  2. 解构或者赋值操作会丢失响应性

示例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()函数详解

往期内容&#xff1a; 《Vue零基础入门教程》合集&#xff08;完结&#xff09; 《Vue进阶教程》第一课&#xff1a;什么是组合式API 《Vue进阶教程》第二课&#xff1a;为什么提出组合式API 《Vue进阶教程》第三课&#xff1a;Vue响应式原理 通过前面的学习, 我们了解到r…...

编程日记 2024/12/11 7:37:57

【开源】A065—基于SpringBoot的库存管理系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看项目链接获取⬇️&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600个选题ex…...

编程日记 2024/12/11 7:36:55

memmove函数（带图详解）

c语言系列 文章目录 c语言系列一、memmove函数介绍1.1、函数基本功能1.2、函数参数2.3、函数返回值 二、memmove的使用2.1、拷贝字节不可大于目标空间2.2、同一空间拷贝 三、函数功能的模拟实现3.1、函数参数及其返回值的设定3.2、函数体实现 四、代码实现 一、memmove函数介绍…...

编程日记 2024/12/11 7:35:53

【Java数据结构】时间和空间复杂度

本章开始将进入数据结构的知识&#xff0c;时间复杂度主要衡量的是一个算法的运行速度&#xff0c;而空间复杂度主要衡量一个算法所需要的额外空间&#xff0c;。 时间复杂度 算法中执行的次数决定了时间复杂度。 在计算执行次数时&#xff0c;只需要计算大概的次数&#xff…...

编程日记 2024/12/11 7:34:52

八斗深度学习

八斗深度学习第二周笔记 一、深度学习步骤&#xff1a;1. 选定模型结构2. 模型参数随机初始化3. 构造模型损失函数4. 选择优化算法并设置超参数5. 数据准备与预处理6. 训练模型7. 模型评估8. 测试模型9. 应用模型 损失函数极小值、导向意义 超参数的影响迭代次数epoch批次量大小…...

编程日记 2024/12/11 7:32:50

安卓报错Switch Maven repository ‘maven‘....解决办法

例如&#xff1a;Switch Maven repository ‘maven(http://developer.huawei.com/repo/)’ to redirect to a secure protocol 在库链接上方添加配置代码&#xff1a;allowInsecureProtocol true...

编程日记 2024/12/11 7:28:46

Scala编程技巧：正则表达式与隐式转换

1. 引言 在Scala编程中&#xff0c;正则表达式和隐式转换是处理字符串匹配和类型转换的强大工具。本文将通过一个实用的示例——电话号码和身份证号码验证器&#xff0c;来展示如何使用这些工具。 2. 知识概括 2.1 正则表达式基础 正则表达式是用于字符串搜索和匹配的强大工…...

编程日记 2024/12/11 7:27:45

UnityShaderLab 实现黑白着色器效果

实现思路&#xff1a;取屏幕像素的RGB值&#xff0c;将三个通道的值相加&#xff0c;除以一个大于值使颜色值在0-1内&#xff0c;再乘上一个强度值调节黑白强度。 在URP中实现需要开启Opaque Texture ShaderGraph实现&#xff1a; ShaderLab实现&#xff1a; Shader "Bl…...

编程日记 2024/12/11 7:24:42

在Windows 10中使用SSH远程连接服务器（附花生壳操作方法）

SSH 在 linux 中是一种重要的系统组件&#xff0c;用户可以使用 SSH 来远程连接 linux 系统的计算机&#xff0c;或者传输文件。不过在 win10 以前&#xff0c;windows 并不原生支持 SSH&#xff0c;需要借助第三方工具来使用 SSH 功能。而实际上&#xff0c;微软在 2015 年就曾…...

编程日记 2024/12/11 7:14:30

在算网云平台云端在线部署stable diffusion (0基础小白超详细教程)

Stable Diffusion无疑是AIGC领域中的AI绘画利器&#xff0c;具有以下显著优势&#xff1a; 1、开源性质&#xff0c;支持本地部署 2、能够实现对图像生成过程的精确控制 虽然SD在使用上有很多的有点&#xff0c;但缺点也是不言而喻的&#xff0c;由于AI绘画的整个过程以及现…...

编程日记 2024/12/11 7:11:27

ubuntu存储空间不足快速解决

几个自己常用的释放空间命令&#xff0c;备忘 将文件夹下的文件按从大到小排列 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 清理系统日志文件&#xff1a; sudo journalctl --…...

编程日记 2024/12/11 7:08:24

Prescan simulink carsim联合仿真平台搭建问题总结

解决办法主要来自忠厚的老王&#xff1a;自动驾驶决策规划算法第二章第一节 决策规划仿真平台搭建_哔哩哔哩_bilibili 这部分直接复制的老王视频的&#xff1a; Q1:prescan安装了&#xff0c;但是找不到Demo_Carsim3D A1:这个文件夹是我自己建立的不是prescan自带的&#xff0…...

编程日记 2024/12/11 7:07:23

STM32（HAL_工程模板的搭建）

目录 一、准备文件 二、创建工程 三、创建分组 四、配置文件处理 五、编译错误处理 一、准备文件 准备HAL库文件: ST官网( 意法半导体-STMicroelectronics )搜索STM32Cube, 本文使用“STM32Cube_FW_F4_V1.24.1” 版本的HAL库, 使用的是F4的库文件。 创建文件&#xff1a…...

编程日记 2024/12/11 7:06:22

Flask入门一（介绍、Flask安装、Flask运行方式及使用、虚拟环境、调试模式、配置文件、路由系统）

文章目录 一、Flask介绍二、Flask创建和运行 1.安装2.快速使用3.Flask小知识4.flask的运行方式 三、Werkzeug介绍四、Jinja2介绍五、Click CLI 介绍六、Flask安装 介绍watchdog使用python–dotenv使用&#xff08;操作环境变量&#xff09; 七、虚拟环境 介绍Mac/linux创建虚拟…...

编程日记 2024/12/11 7:03:16

CAD C# 批量替换当前图中块

本案例功能为选择当前文档中一个块&#xff08;旧块&#xff09;&#xff0c;然后选择新图元&#xff08;新块&#xff09;&#xff0c;运行插件后新块将替换图中所有的旧块。 效果如下&#xff1a; public static class Class1{//选取对象替换块定义[CommandMethod("TT&…...

编程日记 2024/12/11 7:02:10

Android -- [SelfView] 自定义多行歌词滚动显示器

Android – [SelfView] 自定义多行歌词滚动显示器 流畅、丝滑的滚动歌词控件* 1. 背景透明&#xff1b;* 2. 外部可控制进度变化&#xff1b;* 3. 支持屏幕拖动调节进度&#xff08;回调给外部&#xff09;&#xff1b;效果 歌词文件&#xff08;.lrc&#xff09; 一. 使用…...

编程日记 2024/12/11 7:01:09

vscode 配置C/C++环境控制台参数

您可以通过以下步骤在VS Code中配置C/C环境的控制台参数&#xff1a; 1&#xff0c;打开VS Code并进入您的C/C项目 2&#xff0c;点击左侧的"调试"图标&#xff0c;然后点击顶部的齿轮图标&#xff0c;选择“launch.json”。 3&#xff0c;在"launch.json&qu…...

编程日记 2024/12/11 7:00:07

【HarmonyOS学习日志（13）】计算机网络之TCP/IP协议族（二）

文章目录 TCP/IP协议族ARPDNS标志字段&#xff1a;协商具体的通信方式和反馈通信状态DNS查询问题的格式资源记录&#xff08;Resource Record, RR&#xff09;格式&#xff1a;被用于应答字段、授权字段和额外信息字段 IP协议IP服务的特点无状态无连接不可靠 IP头部结构IPv4头部…...

编程日记 2024/12/11 6:58:06

多系统对接的实现方案技术分析

前言 随着信息化和大数据时代的到来&#xff0c;数据资产变得至关重要&#xff0c;企业纷纷上线多种软件系统和移动端应用以适应这一变化。这些系统和应用虽然发挥了各自的优势&#xff0c;但也导致了信息孤岛问题。为了解决这一问题&#xff0c;数据中台和异构系统集成技术应…...

编程日记 2024/12/11 6:56:02

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 "&…...

编程日记 2024/12/11 6:52:55

3维建模blender

官网稳定版下载&#xff1a;https://www.blender.org/download/lts/ windows有安装版和portable版 教程&#xff1a;https://www.bilibili.com/video/BV1kX4y1m7G5 1. 基础操作 场景操作 场景位移&#xff1a;shift鼠标中键长按场景旋转&#xff1a;鼠标中键长按场景缩放&…...

编程日记 2024/12/11 6:51:54

百问FB网络编程 - UDP编程简单示例

6.5 UDP编程简单示例 ​ UDP服务器首先进行初始化操作&#xff1a;调用函数socket创建一个数据报类型的套接字&#xff0c;函数bind将这个套接字与服务器的公认地址绑定在一起。然后调用函数recvfrom接收UDP客户机的数据报。UDP客户机首先调用函数socket创建一个数据报套接字&…...

编程日记 2024/12/11 6:50:52

面试题：什么是ThreadLocal，如何实现的？

强烈推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站:人工智能 你是否还在为简历无人阅读而感到沮丧&#xff1f;是否因为寻觅不到理想的工作机会而感到焦虑不安&#xff1f;试试:看看…...

编程日记 2024/12/11 6:46:49

js后端开发之Next.js、Nuxt.js 与 Express.js

后端js之Next.js、Nuxt.js 与 Express.js 在现代 Web 开发中&#xff0c;JavaScript 已经成为前后端通用的编程语言&#xff0c;而选择合适的后端框架则是构建高效、可扩展应用程序的关键。本文将带你深入了解三个流行的 JavaScript 后端框架&#xff1a;Next.js、Nuxt.js 和 …...

编程日记 2024/12/11 6:45:48

飞牛Nas如何实现阿里云盘、百度网盘的资料迁移！

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 如何使用飞牛NAS实现阿里云盘与百度网盘的数据互相迁移 📒📝 操作步骤注意事项⚓️ 相关链接 ⚓️📖 介绍 📖 你是否有将百度网盘的文件迁移到阿里云盘，或是将阿里云盘的资料转移到百度网盘的需求？本文将给大家演示如…...

编程日记 2024/12/11 6:44:46

如何在小米平板5上运行 deepin 23 ？

deepin 23 加入了 ARM64 支持&#xff0c;这里尝试将 deepin 系统刷入平板中&#xff0c;平常使用中&#xff0c;带个笔记本电脑有时候也会嫌比较麻烦&#xff0c;把 Linux 系统刷入平板中既满足了使用需要&#xff0c;又满足了轻便的需求。为什么不使用 Termux &#xff1f;虽…...

编程日记 2024/12/11 6:41:43

【PlantUML系列】流程图（四）

目录 目录 一、基础用法 1.1 开始和结束 1.2 操作步骤 1.3 条件判断 1.4 并行处理 1.5 循环 1.6 分区 1.7 泳道 一、基础用法 1.1 开始和结束 开始一般使用start关键字&#xff1b;结束一般使用stop/end关键字。基础用法包括&#xff1a; start ... stopstart ...…...

编程日记 2024/12/11 6:38:40

操作系统：进程、线程与作业

背景介绍&#xff1a; 因为单道程序处理器效率低 、设备利用率低 、内存利用率低的问题人们提出了多道程序设计来解决这个问题。 多道程序致力于提高处理机、设备、内存等各种资源的利用率&#xff0c;从而提高系统效率&#xff0c;也就是吞吐量&#xff0c;吞吐量定义为单位时…...

编程日记 2024/12/11 6:36:38

先验地图--slam学习笔记

先验信息 (Prior Information) 先验信息指的是在收集新数据之前已有的知识或假设。这种信息可以来自之前的实验、历史数据、理论模型或专家意见。 地图信息&#xff1a;在无人驾驶中&#xff0c;车辆通常会预先加载高精度地图数据&#xff0c;这些地图数据提供了道路布局、车…...

编程日记 2024/12/11 6:35:37

空指针异常：软件开发中的隐形陷阱

在软件开发的世界里&#xff0c;bug如同隐藏在代码森林中的小怪兽&#xff0c;不时跳出来给开发者们制造惊喜&#xff08;或惊吓&#xff09;。其中&#xff0c;空指针异常&#xff08;Null Pointer Exception, NPE&#xff09;无疑是最令人头疼的一类。它悄无声息&#xff0c;…...

编程日记 2024/12/11 6:34:32

太原网站优化推广/资源网站优化排名软件公司

电脑软件为何总是默认安装到C盘&#xff1f;1、能开机的电脑务必有C盘&#xff0c;这样不会导致软件安装时找不到“路”。2、对于机械硬盘而言&#xff0c;硬盘的盘片上&#xff0c;磁道的排列是由外向内的同心圆&#xff0c;最外侧的是第一个磁道&#xff0c;靠近轴心是最后一…...

编程日记 2025/1/18 16:33:25

pycharm网站开发实例/百度扫一扫识别图片

学习 Python 之 Pygame 开发魂斗罗&#xff08;一&#xff09;Pygame回忆Pygame1. 使用pygame创建窗口2. 设置窗口背景颜色3. 获取窗口中的事件4. 在窗口中展示图片(1). pygame中的直角坐标系(2). 展示图片(3). 给部分区域设置颜色5. 在窗口中显示文字6. 播放音乐7. 图片翻转与…...

编程日记 2025/1/18 15:46:41

成都住建局官网登陆/上海seo招聘

现实的企业中&#xff0c;对于消息通信的应用一直都非常的火热&#xff0c;而且在J2EE的企业应用中扮演着特殊的角色&#xff0c;所以对于它研究是非常有必要的。 上篇博文深入浅出JMS(一)–JMS基本概念&#xff0c;我们介绍了消息通信的规范JMS&#xff0c;我们这篇博文介绍一…...

编程日记 2025/1/18 15:21:18

网站怎么做会被收录/百度广告推广怎么收费

建议在看Android内存管理之前&#xff0c;可以先看一下Java系列中的Java内存管理这篇文章。 1.分配机制 弹性的分配&#xff0c;即一开始不会给每个进程分配太多的内存&#xff0c;但随着app的不断运行&#xff0c;app的内存容量需求越来越大&#xff0c;Android内存会给此app分…...

编程日记 2025/1/18 13:19:08

360百度网站怎么做/seo网络推广技术

大数据Spark运行模式&#xff1a; Yarn模式与配置详解在强大的Yarn环境下Spark是如何工作的&#xff1f;(在国内公司中&#xff0c;Yarn使用的非常多)。1 解压缩文件将spark-3.0.0-bin-hadoop3.2.tgz文件上传到linux并解压缩&#xff0c;放置在指定位置。tar -zxvf spark-3.0.0…...

编程日记 2025/1/18 13:14:00

做网站开视频网站/网站技术制作

让我猜猜你心中的牌&#xff0c;先随机生成27张牌&#xff0c;不能重复 列出三列牌&#xff0c;然后记住其中一张&#xff0c;然后点击牌所在的列&#xff0c;多次就可以猜出你想的牌。 如果是9张只要猜2次&#xff0c;如果是27张就是猜3次。 实现方法&#xff08;27张&#xf…...

编程日记 2025/1/18 10:58:14