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

《Vue进阶教程》第十一课：响应式系统介绍

news 2025/7/10 8:11:57

1 什么是响应式

当数据改变时, 引用数据的函数会自动重新执行

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></head><body><div id="app"></div><script>// 定义一个全局对象: `触发者`const obj = { name: 'hello' }// effect函数引用了obj.name, 这个函数就是 `响应者`function effect() {// 这里可以通过app拿到DOM对象app.innerHTML = obj.name}effect()// 当obj.name改变时, 手动执行effect函数, 完成响应过程setTimeout(() => {obj.name = 'brojie'effect()}, 1000)</script></body>
</html>

为了方便, 我们把引用了数据的函数 叫做 副作用函数

3 副作用函数

如果一个函数引用了外部的资源, 这个函数会受到外部资源改变的影响

我们就说这个函数存在副作用. 因此, 也把该函数叫做副作用函数

这里, 大家不要被这个陌生的名字吓唬住 所谓副作用函数就是引用了数据的函数或者说数据关联的函数

4 自定义设置过程

如果我们能感知数据改变, 拦截到赋值操作. 自定义设置过程 在赋值的同时调用一下数据关联的副作用函数, 就可以实现自动重新执行 理论上可行, 开始动手实践

1) Proxy代理对象

这里我们需要先补充一下Proxy相关的知识. 如果已经知道的小伙伴可以略过 new Proxy: 传入一个源对象, 返回一个新对象(代理对象) 当访问代理对象的属性时, 可以自定义访问过程 当设置代理对象的属性时, 可以自定义设置过程

示例

<!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></head><body><script>// 定义一个源对象(目标对象)const obj = { name: 'xiaopang' }// 创建一个代理对象const proxy = new Proxy(obj, {get(target, key) {// 当访问proxy代理对象的属性时, 会执行get函数// 将get函数的返回值作为表达式的值console.log(target, key)return target[key] // obj.name obj[name]},set(target, key, value) {// 当设置proxy代理对象的属性时, 会执行set函数console.log('自定义set操作', value)target[key] = valuereturn true},})// console.log(proxy.name)// console.log(proxy.age)proxy.name = 'xxp'console.log(obj)</script></body>
</html>

 这样就确定了思路

  1. 先创建代理对象
  2. 再操作代理对象(给代理对象赋值)

2) 最基本的reactive函数

定义一个函数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></head><body><script>function isObject(value) {return typeof value === 'object' && value !== null}/*** 创建响应式数据*  @param [object]: 普通对象*  @return [Proxy]: 代理对象*/function reactive(data) {if (!isObject(data)) returnreturn new Proxy(data, {get(target, key) {return target[key]},set(target, key, value) {target[key] = valuereturn true},})}const state = { name: 'xiaopang' }const p = reactive(state)p.name = 'xxp'console.log(p.name)</script></body>
</html>

5 最基本的响应式

既然可以自定义set操作, 只需要在自定义set操作时, 重新执行属性关联的副作用函数

示例

<!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></head><body><div id="app">hello</div><script>/*** 定义响应式*  @param [object] : 普通对象*  @return [Proxy] : 代理对象*/function reactive(data) {// 如果传入的data不是一个普通对象, 不处理if (typeof data !== 'object' || data == null) returnreturn new Proxy(data, {get(target, key) {console.log(`自定义访问${key}`)return target[key]},set(target, key, value) {console.log(`自定义设置${key}=${value}`)target[key] = value // 先更新值effect() // 再调用effect, 调用effect时会重新获取新的数据return true},})}const pState = reactive({ name: 'hello' })function effect() {app.innerHTML = pState.name}setTimeout(() => {pState.name = 'brojie'}, 1000)</script></body>
</html>

看到这里, 恭喜你, 已经掌握了最核心的原理🤝

💡 小结

  1. 响应式是一个过程, 存在触发者和响应者
  2. 数据的改变, 触发关联的副作用函数响应(重新执行)
  3. 通过Proxy代理源数据
  4. 在Proxy的自定义set操作中, 重新执行副作用函数

相关文章：

《Vue进阶教程》第十一课：响应式系统介绍

1 什么是响应式 当数据改变时, 引用数据的函数会自动重新执行 2 手动完成响应过程 首先, 明确一个概念: 响应式是一个过程, 这个过程存在两个参与者: 一方触发, 另一方响应 比如说, 我们家小胖有时候不乖, 我会打他, 他会哭. 这里我就是触发者, 小胖就是响应者 同样, 所谓…...

编程日记 2024/12/17 6:13:35

rpc设计的再次思考20251215(以xdb为核心构建游戏框架)

1.服务提供者注册的方式 // 表明这是一个服务提供者&#xff0c;ServerType 和 ServerId从application.properties中读取 // 而且只有当当前服务是Game时&#xff0c;才生效。 或者 条件注解??? RpcProvider(typeServerType.Game) public class GameProvider{MsgReceiver…...

编程日记 2024/12/17 6:12:33

pydub AudioSegment增加音频文件音量并保存- python 实现

DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 需要更多数据资源和技术解决方案&#xff0c;知识星球&#xff1a; “DataBall - X 数据球(free)” -------------------------------------------------------------…...

编程日记 2024/12/17 6:11:33

IT 新突破！远程控制电脑技术造就工作与学习新方向！

远程控制电脑技术的历史可追溯到计算机网络的早期时代。最初&#xff0c;通过电话线和调制解调器的组合&#xff0c;实现了远程访问&#xff0c;这是远程控制电脑技术的雏形。随着互联网技术的飞速发展&#xff0c;远程控制电脑技术也日趋完善&#xff0c;并在多个领域得到了广…...

编程日记 2024/12/17 6:10:32

LabVIEW起落架震台检测

在现代飞机制造与维护过程中&#xff0c;起落架的性能测试是保障飞机安全的重要环节。通过LabVIEW开发的起落架小落震台检测系统&#xff0c;通过模拟飞机着陆过程&#xff0c;准确捕捉起落架在着陆时承受的各种动力学特性和应力响应&#xff0c;有效提升起落架设计的精度与可靠…...

编程日记 2024/12/17 6:08:29

Day24 C++ 接口（抽象类）

C 接口&#xff08;抽象类&#xff09; 接口描述了类的行为和功能&#xff0c;而不需要完成类的特定实现。 C 接口是使用抽象类来实现的&#xff0c;抽象类与数据抽象互不混淆&#xff0c;数据抽象是一个把实现细节与相关的数据分离开的概念。 如果类中至少有一个函数被声明…...

编程日记 2024/12/17 6:07:28

UE5 关于画质、机能与开发成本的思考

1、并不省时间 UE5等工具优点是可以通过一些工具与资源快速获得较好的画面&#xff0c;节约一些时间&#xff0c; 但缺点也很多&#xff0c; 一个是各种精度的素材之间的协调问题&#xff0c;参差不齐&#xff0c;统一升级到高精度会产生较大的成本&#xff0c; 一个是资源…...

编程日记 2024/12/17 6:06:27

IOS学习路线图

‌iOS是由苹果公司开发的移动操作系统。 苹果公司最早于2007年1月9日的Macworld大会上公布这个系统&#xff0c;最初是设计给iPhone使用的&#xff0c;后来陆续套用到iPod touch、iPad上。iOS与苹果的macOS操作系统一样&#xff0c;属于类Unix的商业操作系统。原本这个系统名为…...

编程日记 2024/12/17 6:05:26

HICE-day6

二层交换 交换基础 所谓的二层交换机指的是针对数据的二层头部&#xff08;以太网帧头&#xff09;中的MAC地址进行寻址并转发数据的交换设备。二层交换机不具备路由功能&#xff0c;它工作在OSI七层模型的第二层&#xff0c;因此被称为二层交换机。 上图中&#xff0c;PC1、…...

编程日记 2024/12/17 6:03:22

第100+33步 ChatGPT学习：时间序列EMD-ARIMA-LSTM模型

基于Python 3.9版本演示 一、写在前面 上一节&#xff0c;我们学了经验模态分解&#xff08;Empirical Mode Decomposition&#xff0c;EMD&#xff09;。 如同结尾所说&#xff0c;“那么&#xff0c;做这些分解有什么作用呢&#xff1f;有大佬基于这些分解出来的序列分别作…...

编程日记 2024/12/17 6:02:16

（C语言）双向链表

目录 链表的分类 双向链表的实现 1&#xff09;定义链表 2&#xff09;初始化双向链表 3&#xff09;申请节点 4&#xff09;尾插 5&#xff09;头插 6&#xff09;打印链表 7&#xff09;尾删 8&#xff09;头插 9&#xff09;查找 10&#xff09;指定位置删除 11…...

编程日记 2024/12/17 6:01:14

青少年编程与数学 02-004 Go语言Web编程 04课题、接收和处理请求

青少年编程与数学 02-004 Go语言Web编程 04课题、接收和处理请求 课题摘要:一、构建WEB服务器1. 安装Go语言2. 创建项目结构3. 编写代码4. 运行WEB服务器5. 访问WEB服务器 二、接收请求1. 定义处理函数&#xff08;Handler&#xff09;2. 将处理函数与路由关联3. 启动服务器4. …...

编程日记 2024/12/17 5:58:10

Unity全局光照详解

之前就学过但是太久没用又忘了&#xff0c;因此用最简洁易懂的语言做个记录。 全局光照分为两个系统&#xff0c;分别是实时光照和混合光照。&#xff08;点击window/Rendering/Lighing打开此面板&#xff09; 其中全局光照对于我来说都是新技术了&#xff0c;上一次学…...

编程日记 2024/12/17 5:57:09

计算机网络知识点全梳理（三.TCP知识点总结）

目录 TCP基本概念 为什么需要TCP 什么是TCP 什么是TCP链接 如何唯一确定一个 TCP 连接 TCP三次握手 握手流程 为什么是三次握手&#xff0c;而不是两次、四次 为什么客户端和服务端的初始序列号 ISN 不同 既然 IP 层会分片&#xff0c;为什么 TCP 层还需要 MSS TCP四…...

编程日记 2024/12/17 5:55:07

ELK Stack 安装、配置以及集成到 Java 微服务中的使用

ELK Stack 是由 Elasticsearch、Logstash 和 Kibana 组成的日志管理解决方案。以下是详细的安装、配置步骤以及如何将其集成到 Java 微服务中。 1. 安装 ELK Stack 1.1 安装 Elasticsearch 在 Ubuntu 上安装 Elasticsearch&#xff1a; bash wget -qO - https://artifacts…...

编程日记 2024/12/17 5:54:06

list_

1.对象创建 // // Created by 徐昌真 on 2024/12/12. // #include <iostream> #include <list>using namespace std;void Print(list<int> &my_list) {for ( list<int>::iterator iter my_list.begin(); iter ! my_list.end(); iter ){cout <…...

编程日记 2024/12/17 5:52:05

电机驱动，为什么不需要变速器？

在现代汽车和工业应用中&#xff0c;电机驱动的技术愈发成熟&#xff0c;其核心优势之一是能够省去传统机械变速器的需求。 一、电机驱动的基本原理 电机驱动又被称为电动机驱动&#xff0c;其基本原理是将电能转化为机械能。通过控制电机的输入电压和电流&#xff0c;电机能…...

编程日记 2024/12/17 5:51:04

how to write 述职pptx as a tech manager

As a technical manager, crafting an effective 述职 (performance review) PPT requires you to highlight your leadership, team accomplishments, technical contributions, challenges faced, and future plans. Heres a structured approach to design your PPT: 1. Cov…...

编程日记 2024/12/17 5:49:02

关于QMessageBox的一些使用总结和避坑指南

参考学习 Qt中QMessageBox的用法—看这一篇就够了 Qt&#xff1a;使用QMessageBox弹出标准对话框 QMessageBox模态与非模态及QT中的exec() 如何调整QMessageBox的大小 QSS 自定义QMessageBox python QMessageBox设置标签和按钮居中、中文按钮 使用建议 经过查看多方的资料&…...

编程日记 2024/12/17 5:48:01

C语言预处理详解

1.预定义符号 C语言设置了一些预定义符号&#xff0c;可以直接使用&#xff0c;预定义符号也是在预处理期间处理的 __FILE__ //进⾏编译的源⽂件 __LINE__ //⽂件当前的⾏号 __DATE__ //⽂件被编译的⽇期 __TIME__ //⽂件被编译的时间 __STDC__ //如果编译器遵循ANSI C&#…...

编程日记 2024/12/17 5:47:00

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/6/21 9:48:10

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/7/8 9:08:51

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/7/8 21:17:59

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/7/8 4:49:19

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/7/6 21:40:59

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/6/17 5:18:28

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/7/6 7:40:12

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/6/18 3:11:41

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2025/7/9 19:44:46