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