Vue3中Proxy实现响应式系统基本逻辑实现

 
const activeEffect = new Map() // 存储依赖关系
// 追踪依赖
const setDepsMap = (target, propKey) => {
  if(!activeEffect.has(target)) {
    activeEffect.set(target, new Map()) // 每个对象拥有一个属性依赖映射
  }
  const depsMap = activeEffect.get(target); 
  // 如果属性没有跟踪过，初始化一个空数组来存放依赖
  if(!depsMap.has(propKey)) {
    depsMap.set(propKey, [])
  }
  // 假设存在一个全局的effect副作用，会加入到该属性的依赖列表
  const effectFn = () => {
    console.log(`属性%{propKey}被访问，触发更新`)
  }
  
  // 添加一个示例的依赖函数到该属性的依赖列表中
  depsMap.get(propKey).push(effectFn)
}
 
// 更新属性时，触发所有相关的依赖
const effect = (target, propKey) => {
  console.log(`对属性${propKey}进行更新操作`)
  // 获取该属性对应的所有依赖函数（副作用）并执行
  const depsMap = activeEffect.get(target)
  if(depsMap && depsMap.has(propKey)) {
    const effects = depsMap.get(propKey)
    effects.forEach(effectFn = effectFn())
  }
}
 
const handlers = {
  get(target, propKey, proxy) {
    // 跟踪依赖
    setDepsMap(target, propKey)
    return target[propKey]
  },
  set(target, propKey, value) {
    // 触发依赖更新
    effect(target, propKey)
    Reflect.set(target, propKey, value)
  }
}
const target = {
  name: '测试',
  age: '21'
}
const proxyObj = new Proxy(target, handlers)