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)