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

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

news 2026/1/9 13:59:14

前言

本篇博客源于对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

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/1/8 15:19:06

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/4 15:07:47

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/8 15:26:01

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/6 6:43:07

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/12/12 6:01:17

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2026/1/4 0:43:31

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/10/2 7:24:40

【1】跨越技术栈鸿沟：字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…...

编程新知 2026/1/9 2:53:39