登录
首页 >  文章 >  前端

Vue3响应式系统原理深度解析

时间：2026-02-22 17:19:47 171浏览 收藏

本文深入剖析了 Vue 3 响应式系统的核心实现原理——通过 Proxy 精准拦截对象属性的读取与修改，在 get 阶段利用 WeakMap 进行依赖收集（track），在 set 阶段触发对应副作用函数（trigger），再配合 effect 函数作为响应式执行单元，构建出一套高效、可追溯、无内存泄漏的响应式机制；不仅还原了 Vue 3 的底层逻辑，还手把手带你用不到百行代码实现一个原理一致的简化版 Reactive 系统，揭开“数据变化自动更新视图”背后的神秘面纱。

如何构建一个响应式系统，类似于Vue 3的Reactivity？

要构建一个响应式系统，类似 Vue 3 的 Reactive 系统，核心是利用 JavaScript 的 Proxy 捕获对象属性的读取和修改，并在变化时自动触发依赖更新。Vue 3 使用了 Proxy + Reflect + 依赖收集与触发机制来实现高效响应式。下面带你一步步实现一个简化但原理一致的响应式系统。

1. 响应式基础：使用 Proxy 实现 reactive

通过 Proxy 拦截对象的 get 和 set 操作，我们可以在访问属性时收集依赖，在修改属性时触发更新。

function reactive(target) {
  if (typeof target !== 'object' || target === null) return target;

  return new Proxy(target, {
    get(obj, key, receiver) {
      // 收集依赖
      track(obj, key);
      return Reflect.get(obj, key, receiver);
    },
    set(obj, key, value, receiver) {
      const result = Reflect.set(obj, key, value, receiver);
      // 触发依赖
      trigger(obj, key);
      return result;
    }
  });
}

2. 依赖收集与触发：track 和 trigger

我们需要一个地方存储“谁在依赖某个对象的哪个属性”。可以使用 WeakMap 存储对象结构，避免内存泄漏。

// 存储依赖关系：target -> key -> effects
const targetMap = new WeakMap();

function track(target, key) {
  if (!activeEffect) return; // 没有正在运行的副作用函数，不收集
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  dep.add(activeEffect);
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect());
  }
}

3. 副作用函数：effect

effect 是响应式系统的执行单元。它包装一个函数，在执行时会触发 getter，从而被收集为依赖。

let activeEffect = null;

function effect(fn) {
  const effectFn = () => {
    try {
      activeEffect = effectFn;
      return fn();
    } finally {
      activeEffect = null;
    }
  };
  effectFn(); // 立即执行一次以触发依赖收集
  return effectFn;
}

4. 实际使用示例

将以上模块组合起来，就可以实现一个简单的响应式系统。

const state = reactive({ count: 0 });

effect(() => {
  console.log('count is:', state.count);
});

state.count++; // 输出: count is: 1
state.count++; // 输出: count is: 2

每次 state.count 被修改，都会触发所有依赖它的 effect 函数重新执行。

基本上就这些。虽然这只是一个简化版本，但它涵盖了 Vue 3 响应式系统的核心思想：Proxy 拦截、依赖收集（track）、触发更新（trigger）以及副作用调度（effect）。真正生产级系统还会加入调度器、嵌套对象处理、数组监听、cleanup、computed 等优化，但底层逻辑一致。

终于介绍完啦！小伙伴们，这篇关于《Vue3响应式系统原理深度解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>