Vue 3 Response Principle -1

Simple response type

let targetMap = new WeakMap(a)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)
Copy the code

TargetMap, which stores the dependencies associated with each responsive object property, is treated as a “target graph” in VUe3 and is of type WeakMap. (Keys are objects)

The dependent object of the depsMap property

Dep effect collection that should be re-executed when the value changes