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

【学习】【记录】【分享】微型响应系统

news 2026/5/31 15:45:42

前言

本篇博客源于对Vue和React框架中响应式系统的好奇与探索。若文中存在任何错误或有更优的解决方案，欢迎各位读者不吝指正，让我们一起学习，共同进步。

1. 什么是响应式系统

响应式系统是一种编程范式，它允许数据的变化自动地反映在用户界面上。Vue和React等现代前端框架都使用了响应式系统来简化数据驱动的开发。

2. 实现一个简单的响应式系统

在这篇博客中，我们将实现一个简单的响应式系统。这个系统包括以下几个部分：

(1) 数据代理：通过Proxy对象来拦截对数据的访问和修改。
(2) 副作用函数：当数据变化时，自动执行相关的副作用函数。
(3) 调度执行：在数据变化时，调度执行副作用函数。

3. 代码实现

3.1 初始化项目
mkdir demo
cd demo
npm init -y
npm install http-server -D
3.2 根目录下创建index.html和index.js文件
<!-- path demo/index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>微型响应系统</title></head><body><script src="./index.js"></script></body>
</html>

// path demo/index.js
/*** 用一个全局变量存储被注册的副作用函数*/
let activeEffect;
/*** @description 原始数据*/
const data = { text: "Hello, World!" };/*** @description 存储副作用函数的桶*/
const bucket = new Set();/*** @description 代理对象*/
const obj = new Proxy(data, {get(target, key) {if (activeEffect) {bucket.add(activeEffect);}return target[key];},set(target, key, newVal) {target[key] = newVal;bucket.forEach((f) => f());},
});/*** @description 副作用函数*/
const effect = (fn) => {activeEffect = fn;fn();
};/*** @description 执行副作用函数，触发读取*/
effect(() => {document.body.textContent = obj.text;
});/*** @description 1 秒后修改响应式数据*/
setTimeout(() => {obj.text = "微型响应系统";
}, 1000);

当前目录结构
demo
├── index.html
├── index.js
└── package.json

3.3 package.json中添加指令
 // ..."scripts": {"start":"http-server",},//...
3.4 启动项目
npm start

4. 总结

通过以上代码，我们实现了一个微型响应式系统。这个系统可以追踪数据的变化，并在数据变化时执行相关的副作用函数。如果你有任何问题或建议，欢迎在评论区留言。让我们一起学习，共同进步！

相关文章：

【学习】【记录】【分享】微型响应系统

前言 本篇博客源于对Vue和React框架中响应式系统的好奇与探索。若文中存在任何错误或有更优的解决方案&#xff0c;欢迎各位读者不吝指正&#xff0c;让我们一起学习&#xff0c;共同进步。 1. 什么是响应式系统 响应式系统是一种编程范式&#xff0c;它允许数据的变化自动地…...

编程日记 2025/1/14 16:30:33

vue城市道路交通流量预测可视化系统

文章结尾部分有CSDN官方提供的学长 联系方式名片 文章结尾部分有CSDN官方提供的学长 联系方式名片 关注B站、收藏、不迷路&#xff01; 项目亮点 编号&#xff1a;R09 &#x1f687; 网站大屏管理三大前端、vuespringbootmysql、前后端分离架构 &#x1f687; 流量预测道路查询…...

编程日记 2025/1/14 16:27:29

Windows7 Emacs设置及中文乱码解决

个人博客地址&#xff1a;Windows7 Emacs设置及中文乱码解决 | 一张假钞的真实世界 环境说明 Windows7GNU Emacs 25.1.1安装路径&#xff1a;D:/apps/emacs/ 配置Emacs 在Windows7下安装完Emacs后&#xff0c;默认情况下Emacs不会在一启动的时候就生成.emacs配置文件和.ema…...

编程日记 2025/1/14 16:26:27

Python AI教程之十五：监督学习之决策树（6）高级算法C5.0决策树算法介绍

C5.0决策树算法 C5 算法由 J. Ross Quinlan 创建，是 ID3 决策树方法的扩展。它通过根据信息增益（衡量通过按特定属性进行划分而实现的熵减少量）递归地划分数据来构建决策树。 对于分类问题，C5.0 方法是一种决策树算法。它构建规则集或决策树，这是对 C4.5 方法的改进。根…...

编程日记 2025/1/14 16:25:26

MOS管为什么会有夹断，夹断后为什么会有电流？该电流为什么是恒定的？

以下是对MOS管MOS管为什么会有夹断&#xff0c;夹断后为什么还会有电流&#xff1f;该电流为什么是恒定的&#xff1f;的一些心得体会。 1. MOS管为什么会有夹断&#xff1f; 可以认为D极加压使得D极的耗尽层增大(原因是N极接正极&#xff0c;P极接负极&#xff0c;电子被吸引…...

编程日记 2025/1/14 16:24:22

网络安全-RSA非对称加密算法、数字签名

数字签名非常普遍&#xff1a; 了解数字签名前先了解一下SHA-1摘要&#xff0c;RSA非对称加密算法。然后再了解数字签名。 SHA-1 SHA-1&#xff08;secure hash Algorithm &#xff09;是一种 数据加密算法。该算法的思想是接收一段明文&#xff0c;然后以一种不可逆的方式将…...

编程日记 2025/1/14 16:22:19

【AI日记】25.01.13

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI kaggle 比赛&#xff1a;Forecasting Sticker Sales 读书 书名&#xff1a;罗素论幸福 律己 AI&#xff1a; 8 小时&#xff0c;良作息&#xff1a;1:00-9:00&#xff0c; 良短视频&…...

编程日记 2025/1/14 16:20:16

Mysql--运维篇--空间管理（表空间，索引空间，临时表空间，二进制日志，数据归档等）

MySQL的空间管理是指对数据库存储资源的管理和优化。确保数据库能够高效地使用磁盘空间、内存和其他系统资源。良好的空间管理不仅有助于提高数据库的性能&#xff0c;还能减少存储成本并防止因磁盘空间不足导致的服务中断。MySQL的空间管理涉及多个方面&#xff0c;包括表空间…...

编程日记 2025/1/14 16:19:14

JVM面试相关

JVM组成 什么是程序计数器 详细介绍Java堆 什么是虚拟机栈 能不能解释一下方法区&#xff1f; 直接内存相关 类加载器 什么是类加载器&#xff0c;类加载器有哪些 什么是双亲委派模型 类加载过程 垃圾回收 对象什么时候可以被垃圾回收器回收 JVM垃圾回收算法有那些 JVM的分代…...

编程日记 2025/1/14 16:18:14

【leetcode 13】哈希表 242.有效的字母异位词

原题链接 题解链接 一般哈希表都是用来快速判断一个元素是否出现集合里。 当我们想使用哈希法来解决问题的时候&#xff0c;我们一般会选择如下三种数据结构。 数组 set &#xff08;集合&#xff09; map(映射) 如果在做面试题目的时候遇到需要判断一个元素是否出现过的场景…...

编程日记 2025/1/14 16:17:12

Blazor开发复杂信息管理系统的优势

随着现代企业信息管理需求的不断提升&#xff0c;开发高效、易维护、可扩展的系统变得尤为重要。在这个过程中&#xff0c;Blazor作为一种新兴的Web开发框架&#xff0c;因其独特的优势&#xff0c;逐渐成为开发复杂信息管理系统的首选技术之一。本文将结合Blazor在开发复杂信息…...

编程日记 2025/1/14 16:15:10

ue5 1.平A，两段连击蒙太奇。鼠标点一下，就放2段动画。2，动画混合即融合，边跑边挥剑，3，动画通知，动画到某一帧，把控制权交给蓝图。就执行蓝图节点

新建文件夹 创建一个蒙太奇MA_Melee 找到c_slow 调节一下速度 把D_slow拖上去 中间加一个片段 哎呀呀&#xff0c;写错了&#xff0c;我想写2 把这个标记拖过来&#xff0c;点击默认default 弄第二个片段 就会自己变成这个样子 把2这个标记拖到中间 鼠标左键&a…...

编程日记 2025/1/14 16:13:07

2025，AI走向何方？暴雨技术专家为您展望

过去一年中&#xff0c;人工智能技术飞速发展&#xff0c;在各行各业都收获了巨大进展。面对即将到来的2025年&#xff0c;暴雨技术研发团队的专家对AI领域的发展趋势进行了展望&#xff0c;让我们来看看未来一年&#xff0c;有哪些重要趋势值得关注。 迈向关键转折的一步 20…...

编程日记 2025/1/14 16:12:06

Threejs实现 区块链网络效应

大家好&#xff01;我是 [数擎 AI]&#xff0c;一位热爱探索新技术的前端开发者&#xff0c;在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情&#xff0c;欢迎关注我的文章&#xff0c;我们一起成长、进步&#xff01; 开发领域&#xff1a;前端开发 | A…...

编程日记 2025/1/14 16:10:04

宁德时代C++后端开发面试题及参考答案

请阐述面向对象的三大特性。 面向对象编程有三大特性，分别是封装、继承和多态。 封装是指将数据和操作数据的方法绑定在一起，对数据的访问和操作进行限制。这样做的好处是可以隐藏对象的内部细节，只暴露必要的接口给外部。例如，我们可以把一个汽车类的内部引擎状态、速度等…...

编程日记 2025/1/14 16:06:00

【三维数域】三维数据调度-负载均衡和资源优化

在处理大规模三维数据时&#xff0c;负载均衡和资源优化是确保系统高效运行、提供流畅用户体验的关键。这两者不仅影响到系统的性能和稳定性&#xff0c;还直接决定了用户交互的质量。以下是关于如何在三维数据调度中实现有效的负载均衡和资源优化的详细探讨。 一、负载均衡 负…...

编程日记 2025/1/14 16:03:58

Linux服务器网络丢包场景及解决办法

一、Linux网络丢包概述 在数字化浪潮席卷的当下&#xff0c;网络已然成为我们生活、工作与娱乐不可或缺的基础设施&#xff0c;如同空气般&#xff0c;无孔不入地渗透到各个角落。对于 Linux 系统的用户而言&#xff0c;网络丢包问题却宛如挥之不去的 “噩梦”&#xff0c;频繁…...

编程日记 2025/1/14 16:01:55

【信息系统项目管理师】高分论文：论信息系统项目的采购管理（数据中台项目）

更多内容请见： 备考信息系统项目管理师-专栏介绍和目录 文章目录 1、规划采购管理。2、实施采购3、控制采购2022年3月，我以项目经理的身份参加了xx银行xx省分行的数据中台项目。该项目历时10个月，项目经费500万。通过该项目，我们搭建了数据中台，实现了实时的、灵活可配的数…...

编程日记 2025/1/14 15:58:52

AI语音机器人大模型是什么?

AI语音机器人的大模型通常是指具有庞大参数规模和复杂结构的深度学习模型&#xff0c;这些模型能够处理大量数据并从中学习复杂的模式和关系&#xff0c;从而在语音识别、自然语言处理、语音合成等任务上表现出色。以下是AI语音机器人中大模型的具体介绍&#xff1a; 1.大模型…...

编程日记 2025/1/14 15:53:46

极客说｜Azure AI Agent Service 结合 AutoGen/Semantic Kernel 构建多智能体解决⽅案

作者&#xff1a;卢建晖 - 微软高级云技术布道师 「极客说」 是一档专注 AI 时代开发者分享的专栏&#xff0c;我们邀请来自微软以及技术社区专家&#xff0c;带来最前沿的技术干货与实践经验。在这里&#xff0c;您将看到深度教程、最佳实践和创新解决方案。关注「极客说」&am…...

编程日记 2025/1/14 15:49:41

DISMTools企业部署：在组织中大规模应用的最佳实践

DISMTools企业部署&#xff1a;在组织中大规模应用的最佳实践 【免费下载链接】DISMTools The connected place for Windows system administration 项目地址: https://gitcode.com/GitHub_Trending/di/DISMTools DISMTools是一款专为Windows系统管理设计的连接平台&…...

编程新知 2026/5/26 4:16:17

AI时代程序员职业发展与个人创业可行性研究报告

一、行业宏观变革&#xff08;2026核心趋势数据佐证&#xff09; 1.1 开发范式已彻底重构&#xff08;行业不可逆拐点&#xff09; 2026年正式进入AI Agent智能体开发时代&#xff0c;传统CRUD编码价值持续崩塌。 核心权威数据&#xff1a; Gartner预测&#xff1a;2026年75%企…...

编程新知 2026/5/26 2:11:27

【紧急预警】92%的DeepSeek测试用例生成失败源于这4个隐性配置缺陷——资深SDET连夜整理修复清单

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;DeepSeek测试用例生成的现状与危机本质 当前&#xff0c;DeepSeek系列大模型&#xff08;如DeepSeek-Coder、DeepSeek-VL&#xff09;在代码生成与理解任务中展现出强大能力&#xff0c;但其测试用例自动生成…...

编程新知 2026/5/26 0:56:48

XML 服务器

XML 服务器 引言 XML（可扩展标记语言）服务器在现代互联网技术中扮演着至关重要的角色。它为数据的传输和处理提供了灵活且高效的方式。本文将深入探讨XML服务器的概念、工作原理、应用场景及其在软件开发中的重要性。 什么是XML服务器？ XML服务器是一种用于存储、处理和…...

编程新知 2026/5/25 23:29:17

skills CANN开源社区贡献技能包开发指南

前言 开源社区的健康运转&#xff0c;不仅依赖核心代码的贡献&#xff0c;还需要降低贡献门槛、提供清晰的指南和自动化工具。skills仓库是CANN开源社区的"贡献技能包"&#xff0c;提供了一系列辅助脚本、代码模板、CI检查和文档生成工具&#xff0c;帮助新手快速上…...

编程新知 2026/5/25 23:27:16

3分钟掌握JetBrains IDE试用期重置：终极完整指南

3分钟掌握JetBrains IDE试用期重置&#xff1a;终极完整指南 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter JetBrains IDE试用期重置工具&#xff08;ide-eval-resetter&#xff09;是一个开源项目&#xff0c;专…...

编程新知 2026/5/25 20:49:11

基于Max78000与规则引导的音频数据集构建：边缘AI声音识别实战

1. 项目概述&#xff1a;当边缘AI遇见棕榈树里的“窃听者”在边缘计算和物联网设备大行其道的今天&#xff0c;我们常常面临一个核心矛盾&#xff1a;一方面&#xff0c;我们希望设备足够“聪明”&#xff0c;能实时识别并响应特定的声音模式&#xff0c;比如工厂里高压阀门的异…...

编程新知 2026/5/25 20:01:35

别再瞎拖拽了！Unity Prefab从创建到批量修改的保姆级工作流（含变体与嵌套实战）

Unity Prefab高效工作流&#xff1a;从创建到批量修改的实战指南在Unity项目开发中&#xff0c;Prefab&#xff08;预制体&#xff09;是最基础也最强大的工具之一。但很多开发者&#xff0c;尤其是初学者&#xff0c;往往停留在简单的"拖拽-修改"阶段&#xff0c;没…...

编程新知 2026/5/25 18:50:50

AWS DevOps Agent 完全指南

AWS DevOps Agent 是 AWS 推出的前沿 AI 运维代理，自主调查和解决事件、持续预防故障、提升系统可靠性。本文档覆盖从原理到实战的全生命周期管理。 一、定位与价值 一句话定义 AWS DevOps Agent = AI 驱动的 SRE 队友，724 自主调查告警、定位根因、生成修复方案、预防未来…...

编程新知 2026/5/25 18:12:25

从无线破解到PDF解密：盘点那些容易被忽略的‘非主流’密码审计场景与工具

密码安全审计的隐秘战场&#xff1a;从无线网络到加密文档的实战指南 当大多数人谈论密码安全时&#xff0c;脑海中浮现的往往是服务器登录、数据库访问这些企业级场景。然而在数字生活的每个角落&#xff0c;从家庭Wi-Fi到工作文档&#xff0c;密码保护的脆弱性同样可能成为安…...

编程新知 2026/5/26 19:00:31