Vue3响应式原理深度剖析：从Proxy到源码的完整解读

【免责声明：本文由AI辅助生成，内容仅供参考，不构成专业建议。】

Vue3响应式原理深度剖析：从Proxy到源码的完整解读

Vue3的响应式系统从Object.defineProperty全面升级为Proxy，本文从源码角度深度剖析Vue3响应式原理。

Vue3响应式基础

Vue3使用ES6的Proxy实现响应式系统，相比Vue2的Object.defineProperty有了质的飞跃。Proxy可以拦截对象的所有操作，包括新增属性、删除属性等。

Proxy核心机制

Proxy通过handler（处理器）对象定义拦截行为。常用拦截方法：get（读取）、set（写入）、has（in运算符）、deleteProperty（delete）、apply（函数调用）。

示例：const p = new Proxy(obj, { get(target, key) { console.log(‘get:’, key); return reflect.get(target, key); }, set(target, key, value) { console.log(‘set:’, key, value); return Reflect.set(target, key, value); } });

reactive函数实现

reactive函数创建响应式对象。源码流程：reactive → createReactiveObject → new Proxy。createReactiveObject中，targetMap（WeakMap）存储依赖关系，实现跨组件共享。

isReadonly、isShallow等参数控制响应式深度和只读特性。rawTarget存储原始对象，用于响应式对象到原始对象的映射。

ref函数实现

ref用于基本类型，ref内部创建一个包含value属性的对象。源码实现：class RefImpl { get value() { track(); return this._value; } set value(newVal) { this._value = newVal; trigger(); } }

toRef和toRefs用于解构响应式对象，保持响应性。shallowRef只追踪.value的变化，不深度追踪。

依赖收集（track）

依赖收集发生在get拦截器中。流程：get → track(target, TrackOpTypes.GET, key) → 查找activeEffect → 将target.key的依赖添加到targetMap。

activeEffect是当前正在计算的effect，通过全局变量activeEffect记录。effect函数包装副作用函数，自动收集依赖。

触发更新（trigger）

触发更新发生在set拦截器中。流程：set → trigger(target, TriggerOpTypes.SET, key) → 从targetMap获取依赖 → 执行所有依赖的effect。

triggerEffects遍历依赖集合，按scheduling（调度）分组执行。batch批量更新优化，避免重复计算。

computed计算属性

computed使用classComputedRef实现。get时调用track收集依赖，value变化时标记dirty。lazy标识延迟计算，避免不必要的计算。

watch和watchEffect

watch深度观测响应式对象变化，使用traverse递归收集深层依赖。cleanup清理函数，支持stop停止观测。watchEffect自动收集依赖，不需指定。

更多技术文章：https://blog.hanyucloud.com | 客服：400-880-3980