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

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

news 2025/11/14 6:45:35

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

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/11/12 0:21:17

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/10/23 16:56:42

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/29 10:54:34

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...

编程新知 2025/11/13 18:49:23

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...

编程新知 2025/10/6 16:56:37

Java中HashMap底层原理深度解析：从数据结构到红黑树优化

一、HashMap概述与核心特性 HashMap作为Java集合框架中最常用的数据结构之一&#xff0c;是基于哈希表的Map接口非同步实现。它允许使用null键和null值&#xff08;但只能有一个null键&#xff09;&#xff0c;并且不保证映射顺序的恒久不变。与Hashtable相比&#xff0c;Hash…...

编程新知 2025/11/7 21:22:41