1. reactive：创建响应式代理#

• 用Proxy拦截get/set，配合Reflect保证this指向正确
• get：执行track收集依赖；值为对象则递归reactive实现深层响应式
• set：执行trigger触发更新，返回修改结果

代码:

1
export const reactive = <T extends object>(target)=>{
2
return new Proxy(target,{
3
// target → 原始对象
4
// key → 你读的属性名（如 'name'）
5
// receiver → 代理对象自己（保证 this 不乱跑
6

7
  get(target,key,receiver){
8
    const res = Reflect.get(target, key , receiver) as object
9

10
    return res
11
  }
12
})
13

14
// target → 原始对象
15
// key → 你改的属性名
16
// value → 新值
17
// receiver → 代理对象自己
18

19
set(target,key,value,receiver){
20
  const res = Reflect.set(target,key,value,receiver)
21
  return res
22
}
23
}

2. effect：副作用函数注册#

• 全局activeEffect标记当前执行的副作用

• 立即执行一次fn，触发内部响应式数据的get，完成依赖绑定 代码:

  1
  let activeEffect;// 作用:存放当前正在运行的函数
  2
  export const effect = (fn:Function)=>{// fn为你想让它自动更新的函数
  3
  
  4
  const _effect = function(){
  5
    activeEffect = _effect; // 标记当前运行函数
  6
    fn() // 执行业务逻辑,会读取响应式数据触发拦截器
  7
  }
  8
  _effect()
  9
  }

3. track：依赖收集#

• 数据结构：WeakMap(target → Map(key → Set<effect>))

• 读取属性时，将activeEffect存入对应属性的依赖集合 代码:

  const targetMap = new WeakMap() // 存储所有对象的响应式依赖 export const track = (target,key) =>{ // target:当前访问的对象 key:当前访问对象的属性名 let depsMap = targetMap.get(target) if(!depsMap){ depsMap = new Map() // 存属性,用到这个属性的函数 targetMap.set(target,depsMap) } let deps = depsMap.get(key) if(!deps){ deps = new Set()// 存函数(effect) depsMap.set(key,deps) }

  1
  deps.add(activeEffect)

  }

4. trigger：触发更新#

• 修改属性时，取出该属性所有effect并执行，驱动视图/逻辑更新 代码:

  export const trigger = (target,key)=>{ const depsMap = targetMap.get(target)// 收集对象的依赖 const deps = depsMap.get(key)// 收集对象属性的依赖 deps.forEach((effect)=>{ effect()// 重新执行 }) }