【学习】【记录】【分享】微型响应系统
前言
本篇博客源于对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. 总结
通过以上代码，我们实现了一个微型响应式系统。这个系统可以追踪数据的变化，并在数据变化时执行相关的副作用函数。如果你有任何问题或建议，欢迎在评论区留言。让我们一起学习，共同进步！