还记得那个被 jQuery 统治的年代吗？那时候，我们要geng新界面得像保姆一样，时刻盯着数据的变化，一旦数据动了就得手动去修改 DOM。那种感觉，就像是在照顾一个永远长不大的孩子，繁琐且容易出错。后来Vue、React 这些现代框架横空出世，带来了一种全新的编程体验——响应式编程。你只需要关心数据怎么变，界面会自动跟着变。这听起来像魔法，对吧？但今天我们要剥开这层魔法的外衣，kankan里面到底藏着什么机关。其实构建一个简易的响应式系统，并没有你想象中那么遥不可及。

在 Vue.js 的架构中，响应式系统充当了跳动的心脏。它让数据的变化Neng够自动流向视图。但Ru果我们抛开框架那些复杂的生态，单kan这颗“心脏”是如何跳动的，你会发现它的核心逻辑其实非常精妙。本文将带你抛开那些花哨的 API，用Zui原生的 JavaScript，从零开始，手写一个属于你自己的响应式系统。这不仅Neng让你理解 Vue 3 的 Reactive 原理，gengNeng让你对 JavaScript 的 Proxy 机制有一个质的飞跃。

一、 响应式的本质：一场关于“依赖”的捉迷藏

所谓的响应式，说白了就是建立一种联系：当数据 A 发生变化时所有依赖了数据 A 的函数dou要自动重新执行一遍。

想象一下你正在Zuo一个购物车的功Neng。界面上有三个地方用到了“总价”这个数据：一个是顶部的汇总栏，一个是底部的结算按钮，还有一个是中间的优惠提示。Ru果用户修改了商品数量，“总价”变了那你得手动去geng新这三个地方，是不是hen累？响应式系统要Zuo的就是你告诉它：“嘿，这三个地方dou依赖‘总价’。”然后每当你修改“总价”时系统就会自动帮你把这三个地方全部geng新。

那么问题来了。系统怎么知道哪些函数依赖了哪些数据呢？这就涉及到了两个核心动作：“收集依赖”和“触发geng新”。

二、 核心基石：Effect 函数与副作用

在响应式系统中，那些依赖数据的函数，我们通常称之为“副作用”。为什么叫副作用？因为它们不仅是在计算，还会产生外部的影响。我们需要一个函数来注册这些副作用，这就是 effect。

我们Ke以先定义一个全局变量 activeEffect，用来记录当前正在执行的副作用函数。当 effect 执行时我们把 activeEffect 指向这个函数，然后执行它。在执行的过程中，Ru果读取了某个对象的属性，那不就说明这个副作用依赖了这个属性吗？这就是我们收集依赖的绝佳时机！

当然为了处理嵌套的情况，我们还需要一个栈 effectStack 来保证 activeEffect 的正确切换。这就像是在Zuo函数调用栈的备份，确保出来的时候还Neng回到原来的状态。

三、 守门员：Proxy 的拦截艺术

有了 effect，我们还需要一个“守门员”来监听数据的读写。用的是 Object.defineProperty，但那个 API 有hen多局限性，比如无法监听数组索引的变化，也无法监听对象属性的新增。到了 Vue 3，Proxy 成为了主角。

Proxy 就像是一个代理服务器，它Ke以拦截我们对目标对象的所有操作，包括读取属性、设置属性、删除属性等等。这正是我们需要的。我们Ke以在 get 拦截器里进行“依赖收集”，在 set 拦截器里进行“触发geng新”。

这里有个细节需要注意：为了避免重复代理同一个对象，我们需要一个 reactiveMap 来Zuo缓存。Ru果对象Yi经被代理过了就直接返回缓存中的代理对象，别瞎折腾。

四、 神经网络：WeakMap 与依赖收集

现在我们有了副作用，有了拦截器，怎么把它们连起来呢？我们需要一个数据结构来存储：哪个对象的哪个属性，被哪些副作用依赖了。

这就引出了经典的“三层套娃”结构：WeakMap -> Map -> Set。

第一层 WeakMap键是目标对象，值是一个 Map。为什么用 WeakMap？因为它的键是弱引用。当对象被销毁时即使没有手动删除依赖，垃圾回收机制也Neng自动回收这块内存，防止内存泄漏。这一点在大型应用中至关重要。

第二层 Map键是对象的属性名，值是一个 Set。

第三层 Set存储的就是依赖该属性的所有副作用函数。

当我们在 get 拦截器中拦截到读取操作时就调用 track。这个函数会检查当前的 activeEffect 是否存在Ru果存在就把它塞进那个三层结构里。这就好比是给数据贴上了标签：“嘿，这个函数在盯着你呢，你一动它就得动。”

五、 触发机制：精准打击与循环控制

当数据被修改时set 拦截器会触发。这时候，我们要调用 trigger。这个函数会去那个三层结构里把所有依赖这个 key 的副作用函数找出来全部执行一遍。

但是这里有个坑。Ru果我们在执行副作用函数的时候，又修改了数据，导致 触发 trigger，这不就死循环了吗？或者，Ru果两个副作用互相依赖，也会导致无限递归。

为了解决这个问题，我们在执行副作用前，会先把它们放到一个新的 Set 里去重。并且在执行的时候，判断一下 fn !== activeEffect，防止自己修改自己导致的无限递归。这就像是一个安全阀，保证了系统的稳定性。

此外对于数组长度变化、对象新增或删除属性，我们也需要特殊处理。比如当你用 delete 删除一个属性时不仅这个属性变了对象的结构也变了所以不仅要触发该 key 的依赖，还要触发 ITERATE_KEY的依赖，告诉那些遍历对象的函数：“嘿，结构变了你也得geng新一下。”

六、 懒加载的艺术：嵌套对象的递归处理

现实中的数据往往是嵌套的，比如 user: { name: 'Tom', info: { age: 18 } }。当我们读取 state.user.name 时user 是一个对象，name 是它的属性。Ru果我们只代理了 state，那 state.user 就是个普通对象，修改 state.user.name 就不会触发响应。

Zui笨的办法是一开始就把对象里所有的属性dou递归代理一遍。但这太浪费性Neng了万一有些属性根本没被用到呢？

聪明的Zuo法是“按需代理”，也就是懒代理。在 get 拦截器里当我们拿到结果 res 后判断一下它是不是对象。Ru果是对象，我们就调用 createReactive 把它变成响应式，然后返回。这样，只有当你真正访问到嵌套对象时它才会被代理。这就像是在打游戏时地图是随着你的探索一点点加载的，而不是一开始就把整个世界dou塞进内存里。

七、 完整实现：见证奇迹的时刻

说了这么多理论，不如直接kan代码。下面是一个基于 Proxy 的简化版响应式系统实现。它包含了依赖收集、触发geng新、嵌套对象处理，以及一些常见的边界情况处理。你Ke以试着读一读，感受一下逻辑的流动。

let activeEffect = null;
const effectStack = ;
const targetMap = new WeakMap;
const reactiveMap = new WeakMap;
const ITERATE_KEY = Symbol;
// 注册副作用函数
function effect {
  const effectFn =  => {
    // 清理旧的依赖，防止内存泄漏或重复执行
    cleanup;
    activeEffect = effectFn;
    effectStack.push;
    try {
      return fn;
    } finally {
      effectStack.pop;
      activeEffect = effectStack || null;
    }
  };
  effectFn.deps = ; // 存储依赖了该副作用的所有依赖集合
  effectFn; // 立即执行一次触发依赖收集
  return effectFn;
}
// 清理函数
function cleanup {
  for  {
    dep.delete;
  }
  effectFn.deps.length = 0;
}
// 依赖收集
function track {
  if  return; // 没有正在执行的 effect，不用收集
  let depsMap = targetMap.get;
  if  targetMap.set));
  let dep = depsMap.get;
  if  depsMap.set));
  if ) {
    dep.add;
    activeEffect.deps.push; // 双向绑定，方便清理
  }
}
// 触发geng新
function trigger {
  const depsMap = targetMap.get;
  if  return;
  const effectsToRun = new Set;
  const add =  => {
    if  return;
    dep.forEach => {
      if  effectsToRun.add; // 避免死循环
    });
  };
  add);
  add); // 处理数组长度或对象结构变化
  effectsToRun.forEach => fn);
}
// 工具函数：判断是否是对象
function isObject {
  return val !== null && typeof val === 'object';
}
// 创建响应式对象
function createReactive {
  if ) return obj;
  // 避免重复代理
  if ) return reactiveMap.get;
  const proxy = new Proxy(obj, {
    get {
      if  return true; // 标记位
      const res = Reflect.get;
      track; // 收集依赖
      // 懒代理：只有访问到嵌套对象时才递归
      return isObject ? createReactive : res;
    },
    set {
      const oldValue = target;
      const hadKey = Object.prototype.hasOwnProperty.call;
      const result = Reflect.set;
      // 只有值真的变了或者是新增属性时才触发
      if  {
        trigger;
        trigger;
      } else if  && Number.isNaN)) {
        trigger;
      }
      return result;
    },
    has {
      track;
      return Reflect.has;
    },
    ownKeys {
      track;
      return Reflect.ownKeys;
    },
    deleteProperty {
      const hadKey = Object.prototype.hasOwnProperty.call;
      const result = Reflect.deleteProperty;
      if  {
        trigger;
        trigger;
      }
      return result;
    },
  });
  reactiveMap.set;
  return proxy;
}

八、 实战演练：kankan它怎么跑

代码写好了我们来跑个例子试试。假设我们有一个状态对象，里面有个 count 和一个 user 对象。我们定义两个副作用，一个打印 count，一个打印 user.name。

const state = createReactive({
  count: 0,
  user: { name: 'Tom', age: 18 },
});
effect => {
  console.log;
});
effect => {
  console.log;
});
// 开始修改数据
state.count++;
state.user.name = 'Jerry';
state.user.age = 20; // 注意这里

输出结果会是什么呢？

count: 0
user name: Tom
count: 1
user name: Jerry

请注意kan，state.user.age = 20 这行代码执行后控制台并没有任何输出。为什么？因为我们没有定义任何依赖 age 的副作用函数。这正是依赖收集精度的体现——按需geng新。系统不会因为数据变了就瞎忙活，只有真正关心这个数据的地方，才会收到通知。这种精准的控制，是高性Neng前端应用的基石。

九、 进阶思考：Computed 与 Watch 的

有了上面这套 effect / track / trigger 的核心机制，我们其实Yi经拥有了无限的可Neng。比如 Vue 中著名的 computed和 watch，本质上dou是在这套机制上封装出来的。

computed 其实就是一个特殊的 effect，它有个 dirty 标志位。当依赖的数据变了它不会立即重新计算，而是把 dirty 标记为 true。只有当你真正去读取这个计算属性的值时Ru果发现它是 dirty 的，才会去重新执行函数计算值，然后把 dirty 改回 false。这就是所谓的“懒执行”。

而 watch，其实就是包装了一个 scheduler的 effect。当依赖变了不立即执行回调，而是把回调扔进调度器里这样Ke以控制geng新的时机，避免频繁刷新导致的性Neng抖动。

十、 ：从原理到实践

通过从零构建这个简易的响应式系统，我们不仅揭开了 Vue 等框架神秘的面纱，geng重要的是我们掌握了“数据驱动视图”的底层逻辑。这不仅仅是理解框架的需要，geng是提升我们编程思维的过程。

当然真正的工程化框架比这要复杂得多。它们还要处理数组、Set、Map 等各种集合类型，还要考虑 Ref、ToRef、ToRefs 等 API 的兼容，还要配合编译器Zuo静态提升以优化性Neng。但万变不离其宗，核心依然是这套基于 Proxy 和 effect 的依赖收集与触发机制。

希望这篇文章Neng让你在面对复杂的框架源码时不再感到畏惧。当你下次使用 reactive 时脑海里Neng浮现出那个 WeakMap 和 Proxy 协同工作的画面。毕竟只有理解了底层，我们才Neng在代码的世界里游刃有余，创造出geng优雅、geng高效的程序。Ru果你觉得这篇文章对你有帮助，不妨动手敲一遍代码，那种“掌控一切”的感觉，真的hen棒。

---