Vue 3 响应原理-1

简易响应式

let targetMap = new WeakMap()

function track(target,key) {
    let depsMap = targetMap.get(target)
    if(!depsMap) {
        targetMap.set(target, (depsMap = new Map()))
    }
    let dep = depsMap.get(key)
    if(!dep) {
        dep = new Set()
        depsMap.set(key, dep)
    }
    dep.add(effect)
}

function triggle(target, key) {
    let depsMap = targetMap.get(target)
    if(!depsMap) {
        return
    }
    let dep = depsMap.get(key)
    if(dep) {
        dep.forEach(effect => {
            effect()
        })
    }
}




let product = {
    price: 4,
    num: 2
}
let total = 0

let effect = () => {
    total = product.price * product.num
}
track(product, 'quantity')

effect()


product.num = 10
triggle(product, 'quantity')
conosole.log(total)

targetMap 存储了与每个 响应式对象属性 关联的依赖 在vue3中被视为 “目标图” ，它的类型是WeakMap。（键是对象）

depsMap 属性的依赖对象

Dep effect集合，值发生变化时应重新执行