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

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

news 2026/4/6 4:14:11

前言

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

Seedance 2.0有多离谱？这款动画师能生成角色一致性视频的AI工具你一定要用

作为一个动画师&#xff0c;这两年&#xff0c;我后台被问得最多的一类问题&#xff0c;不是“哪款 AI 生图最好”&#xff0c;也不是“哪款 AI 视频最火”&#xff0c;而是更具体、更扎心的一句&#xff1a;动画师能生成角色一致性视频的AI工具&#xff0c;到底有没有真的能用…...

编程新知 2026/4/6 4:12:30

resume-cli实际案例分享：成功求职者的简历配置终极指南

resume-cli实际案例分享&#xff1a;成功求职者的简历配置终极指南 【免费下载链接】resume-cli CLI tool to easily setup a new resume &#x1f4d1; 项目地址: https://gitcode.com/gh_mirrors/re/resume-cli resume-cli是一款基于JSON Resume标准的命令行工具&…...

编程新知 2026/4/6 3:30:30

【高等数学】第一讲：函数与初等函数

目录 函数的基本概念 函数的表示法 函数的几种重要特性 有界性 例子 区间的有界性 仅单侧有界的函数 单调性 全定义域上严格单调的函数 分区间单调的函数 奇偶性 偶函数 奇函数 分段函数奇偶性 分段奇函数 分段偶函数 周期性 初等函数 常数函数 幂函数…...

编程新知 2026/4/6 3:07:05

保姆级教程：在Win10上用VMware给Ubuntu虚拟机配置共享文件夹（含重启失效解决方案）

VMware虚拟机共享文件夹配置全指南&#xff1a;从基础配置到疑难解决 在Windows 10主机上使用VMware运行Ubuntu虚拟机进行开发时&#xff0c;共享文件夹功能是提高工作效率的关键。本文将详细介绍如何从零开始配置共享文件夹&#xff0c;并解决常见的"安装按钮灰色"、…...

编程新知 2026/4/6 2:38:29

Windows下OpenClaw极简安装：Qwen3.5-9B-AWQ-4bit镜像10分钟体验

Windows下OpenClaw极简安装&#xff1a;Qwen3.5-9B-AWQ-4bit镜像10分钟体验 1. 为什么选择这个组合&#xff1f; 最近在折腾本地AI自动化时&#xff0c;发现很多工具要么配置复杂&#xff0c;要么对硬件要求太高。直到遇到OpenClawQwen3.5-9B-AWQ-4bit这个组合&#xff0c;才…...

编程新知 2026/4/6 2:38:29

电路接口技术解析：从TTL到无线通信的演进

1. 电路接口概述&#xff1a;信号传输的关键桥梁在嵌入式系统和电子电路设计中&#xff0c;接口技术就像城市之间的高速公路系统。当不同模块需要通信时&#xff0c;就像不同方言的人群需要找到共同语言。我曾参与过一个工业控制器项目&#xff0c;CPU与传感器间的通信故障导致…...

编程新知 2026/4/6 0:18:50

08_微服务划分与团队人数之监控治理与跨团队协作

微服务划分与团队人数之监控治理与跨团队协作 体系内容 可观测性三支柱：指标、日志、链路追踪 治理要素：SLO、Dashboard、告警分级、容量视图、契约审计 Spring Cloud Alibaba 关联：Nacos、Sentinel、Gateway、RocketMQ、Dubbo 与观测平台协同 跨团队机制：接口契约、消息契…...

编程新知 2026/4/5 23:09:27

jEasyUI 显示海量数据

jEasyUI 显示海量数据 引言 随着互联网技术的飞速发展，大数据时代已经到来。在众多前端框架中，jEasyUI以其简洁、易用、功能强大等特点，受到了广大开发者的喜爱。本文将深入探讨jEasyUI在显示海量数据方面的应用，帮助开发者更好地应对大数据挑战。 jEasyUI简介 jEasyUI…...

编程新知 2026/4/5 22:51:09

2026 年1月 17 日-KB5077744（OS 内部版本26200.7627 和 26100.7627）带外

&#x1f525;个人主页&#xff1a;杨利杰YJlio❄️个人专栏&#xff1a;《Sysinternals实战教程》《Windows PowerShell 实战》《WINDOWS教程》《IOS教程》《微信助手》《锤子助手》 《Python》 《Kali Linux》《那些年未解决的Windows疑难杂症》&#x1f31f; 让复杂的事情更…...

编程新知 2026/4/5 21:43:33

DFX测试与专项测试：非功能性测试的深度解析与实践指南

1. DFX测试&#xff1a;产品全生命周期的质量守护者 第一次接触DFX测试这个概念时&#xff0c;我也被这个缩写搞懵了。后来在实际项目中才发现&#xff0c;这其实就是把质量保障前置到设计阶段的绝佳实践。DFX中的"X"就像是个万能变量&#xff0c;可以代入产品生命周…...

编程新知 2026/4/5 21:39:27