简化版 Vue3 reactive + effect 响应式系统，能让数据变化时自动更新到 HTML😊
核心思路就是：
reactive：用 Proxy 拦截对象的 get/set。
effect：收集依赖（哪个函数用了数据），当数据变化时重新执行。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Mini Reactive</title> </head> <body><p>Count: <span id="count"></span></p><button id="add">+1</button><script>// 当前活跃的副作用函数 let activeEffect;// 简单依赖收集容器 const deps = new Map();// reactivefunction reactive(obj) {return new Proxy(obj, {get(target, key) {if (activeEffect) {if (!deps.has(key)) deps.set(key, new Set());deps.get(key).add(activeEffect);}return target[key];},set(target, key, value) {target[key] = value;if (deps.has(key)) {deps.get(key).forEach(fn => fn());}return true;}});}// effectfunction effect(fn) {activeEffect = fn;fn(); // 立即执行一次 activeEffect = null;}// 使用 const state = reactive({ count: 0 });effect(() => {document.getElementById('count').innerText = state.count;});document.getElementById('add').onclick = () => state.count++;</script> </body> </html>