Products
96SEO 2026-08-07 07:25 4
痛点：只能拦截「已有属性」的读写，新增/删除属性、数组索引还有 Map/Set 都无法自动响应。
// 只能拦截已有属性
Object.defineProperty(obj。'a',{
get { /* ... */ },set { /* ... */ }
});obj.a = 1，// ✅ 能检测到
obj.b = 2;// ❌ 新增属性，检测不到
delete obj.a;// ❌ 删除属性，检测不到
arr = 'x';// ❌ 数组索引修改，检测不到
arr.push;// ❌ 数组变异，需要手动 重写
痛点解决：一次性拦截整个对象。天然支持属性增删、数组索引还有原生集合。
// Proxy 拦截整个对象，不关心具体属性
const proxy = new Proxy(target。{
get { /* 拦截所有读取 */ },set { /* 拦截所有写入 */ },deleteProperty { /* 拦截删除 */ },has { /* 拦截 in 操作 */ }
});proxy.newProp = 123;// ✅ 新增属性能检测到
delete proxy.a;// ✅ 删除属性能检测到
proxy.arr = 'x';// ✅ 数组索引修改能检测到
| 维度 | Vue 2 : Object.defineProperty | Vue 3 : Proxy + Reflect |
|---|---|---|
| 拦截粒度 | 逐个属性定义 getter/setter | 整个对象统一代理 |
| 属性新增/删除 | 需要手动调用 $set / $delete 才能响应 | 自动响应，无需额外 API |
| 数组变异方法 | 必须重写 push/pop/... 等方法才能捕获 | 原生捕获，所有变异方法均可感知 |
| 原生集合支持 | No | Covers Map / Set / WeakMap out‑of‑‑box |
| 性能 & 初始化成本{/* Vue 2 必须递归遍历全部属性 */}初始化时递归遍历所有属性 td>{/* Vue 3 使用懒代理 */}懒代理。仅在访问时才处理 |
┌──────────┐ ┌─────────────┐ ┌─────────┐ │ compiler │ │ reactivity │ │ runtime │ │ 编译器 │ │ 响应式主要 │ │ 运行时 │ └──────────┘ └──────┬──────┘ └─────────┘ │ ┌─────────↔↔↔↔↔↔↔↔↔↔
The reactivity module is core of Vue's reactive system.. It does not depend on compiler or runtime and can be used independently.
This function wraps a plain object with a Proxy and returns proxy. All operations on proxy are intercepted.
function reactive {
return new Proxy(target,{
get {
const result = Reflect.get;其实，// 收集依赖 —— “谁在读这个属性？不过，”
track，// 对象嵌套的懒代理
if {
return reactive;老实说，}
return result;},set {
const oldValue = target;const result = Reflect.set;if {
// 值真的变化才触发更新
trigger;}
return result;},deleteProperty {
const result = Reflect.deleteProperty;if {
trigger;}
return result;}
})，}
为什么使用 Reflect？
Reflect.get/set/deleteProperty‑和 Proxy 的 handler 参数一一对应，保证正确的 this 指向。A副作用函数是“当依赖的数据变化时需要重新执行的函数”。它是 computed 与 watch 的底层实现。
// 全局变量：当前正在执行的 effect
let activeEffect = null;
function effect {
const effectFn = => {
activeEffect = effectFn;// 标记当前 effect 为活跃状态
fn;// 执行使用者提供的回调 → 会触发 getter → track 收集依赖
activeEffect = null;// 清除标记，防止误收集
};怎么说呢，effectFn;// 首次立即执行一次以建立依赖关系
return effectFn;老实说，// 返回可手动触发的包装函数
}
使用示例：
const state = reactive;effect => {
console.log;})，// 第一次执行 → 收集对 state.count 的依赖
state.count = 1;// setter 被拦截 → trigger →
执行上面的 effectFn → 打印新值
The data structure is a three‑level map: **target → key → Set
// WeakMap 防止内存泄漏：当 target 被 GC 时对应记录会自动清理
const targetMap = new WeakMap;怎么说呢，function track {
if return;// 没有正在执行的 effect，无需收集
let depsMap = targetMap.get;if {
depsMap = new Map;targetMap.set;}
let dep = depsMap.get;if {
dep = new Set;depsMap.set，}
dep.add;// 把当前 effect 加入该属性对应的依赖集合
}
结构示意：
targetMap └─ target └─ depsMap ├─ 'count' → Set └─ 'name' → Set
function trigger {
const depsMap = targetMap.get;if return，const dep = depsMap.get;if return，// 防止在遍历过程中被
修改导致循环错误，先复制一份再遍历
.forEach);}
A step‑by‑step walkthrough:
// 第一步先：创建响应式数据
const state = reactive;// 接下来：注册副作用
effect => {
console.log;})，/* 执行过程：
• activeEffect 被设为当前 effectFn；• fn 执行时读取 state.count → get 拦截 → track；• 再读取 state.name → get 拦截 → track；• 完成后 activeEffect 恢复为 null；怎么说呢，输出: count=0。name=vue */
/* 然后：修改数据触发更新 */
state.count++;// set 拦截 → trigger →
执行上面的 effectFn
// 控制台输出: count=1,name=vue
