官方微网站,泰安互联网公司,广州番禺越秀和樾府,nginx搭建和WordPress前言
本篇博客源于对Vue和React框架中响应式系统的好奇与探索。若文中存在任何错误或有更优的解决方案#xff0c;欢迎各位读者不吝指正#xff0c;让我们一起学习#xff0c;共同进步。
1. 什么是响应式系统
响应式系统是一种编程范式#xff0c;它允许数据的变化自动地…前言
本篇博客源于对Vue和React框架中响应式系统的好奇与探索。若文中存在任何错误或有更优的解决方案欢迎各位读者不吝指正让我们一起学习共同进步。
1. 什么是响应式系统
响应式系统是一种编程范式它允许数据的变化自动地反映在用户界面上。Vue和React等现代前端框架都使用了响应式系统来简化数据驱动的开发。
2. 实现一个简单的响应式系统
在这篇博客中我们将实现一个简单的响应式系统。这个系统包括以下几个部分
(1) 数据代理通过Proxy对象来拦截对数据的访问和修改。 (2) 副作用函数当数据变化时自动执行相关的副作用函数。 (3) 调度执行在数据变化时调度执行副作用函数。
3. 代码实现
3.1 初始化项目
mkdir demo
cd demo
npm init -y
npm install http-server -D3.2 根目录下创建index.html和index.js文件
!-- path demo/index.html --
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title微型响应系统/title/headbodyscript 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 start4. 总结
通过以上代码我们实现了一个微型响应式系统。这个系统可以追踪数据的变化并在数据变化时执行相关的副作用函数。如果你有任何问题或建议欢迎在评论区留言。让我们一起学习共同进步
