vue3 reactive effect简单实现html更新

简化版 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();

    // reactive
    function 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;
        }
      });
    }

    // effect
    function 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>

 

posted @ 2025-09-02 10:40  jerry-mengjie  阅读(7)  评论(0)    收藏  举报