Vue3响应式原理实现（简单手写）

参照源码

//设置缓存
let toProxy = new WeakMap()
let toRaw = new WeakMap()
//proxy配置
const baseHander = {
  get(target, key){
    const res = Reflect.get(target, key)
    // 收集依赖
    track(target, key)
    // 递归寻找
    return typeof res=='object' ? reactive(res) : res
  },
  set(target, key, val){
    const info = {oldValue: target[key], newValue:val}
    const res = Reflect.set(target, key, val)
    // 派发更新
    trigger(target, key, info)
    return res
  }
}
function reactive(target){
  // 查询缓存
  let observed = toProxy.get(target)
  if(observed){
    return observed
  }
  if(toRaw.get(target)){
    return target
  }
  //vue3响应式采用proxy处理
  observed = new Proxy(target, baseHander)
  // 设置缓存
  toProxy.set(target, observed)
  toRaw.set(observed, target)
  return observed
}

let effectStack = []
let tagetMap = new WeakMap()
/*
{
  target:{
    age: []  (set),
    name:[effect]
  }
}
*/
//派发更新
function trigger(target, key, info){
  const depsMap = tagetMap.get(target)
  if(depsMap===undefined){
    return 
  }
  const effects = new Set()
  const computedRunners = new Set()
  if(key){
    let deps = depsMap.get(key)
    deps.forEach(effect=>{
      if(effect.computed){
        computedRunners.add(effect)
      }else{
        effects.add(effect)
      }
    })
  }
  // const run = effect=> effect()
  effects.forEach(effect=> effect())
  computedRunners.forEach(effect=> effect())
}
//依赖收集
function track(target, key){
  let effect = effectStack[effectStack.length-1]
  if(effect){
    let depsMap = tagetMap.get(target)
    if(depsMap===undefined){
      depsMap = new Map()
      tagetMap.set(target, depsMap)
    }
    let dep = depsMap.get(key)
    if(dep===undefined){
      dep = new Set()
      depsMap.set(key, dep)
    }
    if(!dep.has(effect)){
      dep.add(effect)
      effect.deps.push(dep)
    }
  }
}

// 存储effect
function effect(fn,options={}){
  let e = createReactiveEffect(fn, options)
  // 没有考虑compueted
  if(!options.lazy){
    e()
  }
  return e
}

function createReactiveEffect(fn,options){
  const effect = function effect(...args){
    return run( effect, fn , args)
  }
  effect.deps = []
  effect.computed = options.computed
  effect.lazy = options.lazy
  return effect

}
//数据变更内容存入栈中
function run(effect, fn , args){
  if(effectStack.indexOf(effect)===-1){
    try{
      effectStack.push(effect)
      return fn(...args)
    }
    finally{
      effectStack.pop()
    }
  }
}

function computed(fn){
  //lazy设置缓存
  const runner = effect(fn,{computed:true, lazy:true})
  return {
    effect:runner,
    get value(){
      return runner()
    }
  }
}

简单实现-手写

//手写响应式
let currentEffect;
class Dep {
    constructor() {
       this.effects = new Set()//依赖收集集合，使用set防止其重复收集 
    }
    //依赖收集
    depend() {
        if(currentEffect){
            this.effects.add(currentEffect)
        }
    }
    //派发更新
    notice() {
        //遍历依次去执行收集到的依赖
        this.effects.forEach(effect=>{
            effect()
        })
    }
}

//建立键与dep直接的一一对应关系
let targetMap = new Map()
function getDep(target,key){
    let depsMap = targetMap.get(target)
    if(!depsMap){
        depsMap = new Map()
        targetMap.set(target, depsMap)
    }
    let dep = depsMap.get(key)
    if(!dep){
        dep = new Dep()
        depsMap.set(key,dep)
    }
    return dep
}

//响应式
function reactivity(obj) {
    return new Proxy(obj,{
        get(target,key){
            const dep = getDep(target,key)
            //收集依赖
            dep.depend()
            return Reflect.get(target,key)
        },
        set(target,key,newVal){
            const dep = getDep(target,key)
            const ret = Reflect.set(target,key,newVal)
            //设置值之后再去触发更新
            dep.notice()
            return ret
        }
    })
}

//监听变化
function effectWatch(effect) {
   currentEffect = effect
   effect()//第一次先执行依次
   currentEffect = null
}



let obj = reactivity({
    count:1
})
let b
effectWatch(()=>{
    b = obj.count + 1
    console.log(b)
})

obj.count = 2
obj.count = 3