# Vue3响应式系统深度解析：从Proxy到effect的完整工作流揭秘

一、响应式系统的核心进化

Vue3的响应式系统实现了从Vue2的Object.defineProperty到Proxy的跨越式升级。这种转变不仅解决了动态属性监听、数组方法拦截等历史遗留问题，更通过Proxy的13种拦截能力构建了更完善的响应式网络。

在Vue3中，reactive函数返回的Proxy对象会：

拦截属性的读取/修改（get/set）
监听数组的push/pop等变异方法
支持Symbol类型属性的响应式
自动处理嵌套对象的深度监听

ini 复制代码

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

	state.count; // 触发get拦截

	state.count++; // 触发set拦截

	state.arr = [1, 2];

	state.arr.push(3); // 触发数组方法拦截

二、响应式工作流三重奏

1. 响应式对象创建（reactive）

当执行reactive(obj)时，Vue3会：

创建obj的Proxy代理
使用WeakMap存储原始对象与代理对象的映射
初始化依赖收集器（effect）

javascript 复制代码

javascript
	function reactive(target) {

	  return new Proxy(target, {

	    get(target, key, receiver) {

	      track(target, key); // 收集依赖

	      return Reflect.get(target, key, receiver);

	    },

	    set(target, key, value, receiver) {

	      const result = Reflect.set(target, key, value, receiver);

	      trigger(target, key); // 触发更新

	      return result;

	    }

	  });

	}

2. 依赖收集（track）

当访问响应式属性时，track函数会：

获取当前激活的effect
将effect与目标属性建立映射关系
存储在effect栈中实现嵌套effect的正确收集

ini 复制代码

javascript
	let activeEffect = null;

	const effectStack = [];

	 

	function effect(fn) {

	  const reaction = () => {

	    activeEffect = reaction;

	    fn();

	  };

	  reaction();

	}

	 

	function track(target, key) {

	  if (activeEffect) {

	    let depsMap = targetMap.get(target);

	    if (!depsMap) {

	      depsMap = new Map();

	      targetMap.set(target, depsMap);

	    }

	    let deps = depsMap.get(key);

	    if (!deps) {

	      deps = new Set();

	      depsMap.set(key, deps);

	    }

	    deps.add(activeEffect);

	  }

	}

3. 依赖触发（trigger）

当属性值改变时，trigger函数会：

遍历所有关联的effect
按特定顺序执行更新（先执行同步effect，再执行异步）
处理数组新增元素的响应式转换

ini 复制代码

javascript
	function trigger(target, key) {

	  const depsMap = targetMap.get(target);

	  const effects = new Set();

	  

	  // 收集所有关联的effect

	  if (depsMap) {

	    const deps = depsMap.get(key);

	    deps?.forEach(effect => effects.add(effect));

	  }

	 

	  // 执行effect

	  effects.forEach(effect => effect());

	}

三、深度响应式实现原理

1. 嵌套对象处理

当访问深层属性时，Proxy的get拦截器会递归创建响应式对象：

javascript 复制代码

javascript
	get(target, key) {

	  const res = Reflect.get(target, key, receiver);

	  // 递归处理嵌套对象

	  return typeof res === 'object' && res !== null ? reactive(res) : res;

	}

2. 数组响应式优化

针对数组的特殊处理：

拦截push/pop等7个变异方法
自动将新元素转为响应式
处理数组length属性变化的特殊逻辑

ini 复制代码

javascript
	const arrayMethods = ['push', 'pop', 'shift', 'unshift', 'splice'];

	arrayMethods.forEach(method => {

	  const original = Array.prototype[method];

	  Array.prototype[method] = function(...args) {

	    const result = original.apply(this, args);

	    trigger(this, `${method}`);

	    return result;

	  };

	});

四、优化机制解析

1. 分支切换优化

通过activeEffect栈实现嵌套effect的正确处理：

ini 复制代码

javascript
	function effect(fn) {

	  const reaction = () => {

	    effectStack.push(reaction);

	    activeEffect = reaction;

	    fn();

	    effectStack.pop();

	    activeEffect = effectStack[effectStack.length - 1];

	  };

	  reaction();

	}

2. 细粒度更新

通过依赖映射表实现最小更新：

markdown 复制代码

	targetMap结构：

	{

	  target1: {

	    key1: Set(effect1, effect2),

	    key2: Set(effect3)

	  },

	  target2: {...}

	}

五、与Vue2响应式对比

特性	Vue2	Vue3
动态属性监听	需要Vue.set	原生支持
数组方法拦截	重写原型方法	原生拦截
对象属性删除	需要Vue.delete	原生支持
Map/Set/WeakMap	不支持	原生支持
性能开销	O(n)遍历属性	按需拦截

六、完整工作流示意图

markdown 复制代码

	用户操作 → 修改响应式属性 → Proxy.set拦截 → trigger触发依赖 → 执行effect → 更新DOM

	       ↑

	用户读取属性 → Proxy.get拦截 → track收集依赖

这种基于Proxy的响应式系统设计，使得Vue3在保持API简洁的同时，获得了更强大的响应式能力和更好的性能表现。通过精确的依赖收集和触发机制，配合Proxy的全面拦截能力，Vue3成功构建了新一代高效、灵活的响应式系统。其实使用Lynx可以更快实现。作为一个用自然语言生成应用的网站，只需用日常语言描述需求，Lynx就能自动生成完整代码并部署应用。从需求文档到上线产品，全程无需手动编码，开发效率提升10倍以上。无论是快速搭建原型还是构建复杂系统，Lynx的AI引擎都能精准理解意图，让软件交付进入"对话式开发"新时代。lynx.yunji-ai.cn/