Dependency Collection, easy version

Let price = 5 let num = 2 let total = 0 // const DepSet = new Set( Const track = () => {depset.add (effect)} // trigger const trigger = () => {depset.foreach (effect => Track () trigger() console.log(total) num = 5 track() trigger() console.log(total)Copy the code

Reactive dependency collection, multiple dependency versions

Const DepMap = new Map() const DepMap = new Map() Function track(key) {let DepSet = depmap. get(key) if (! DepSet) { DepSet = new Set() DepMap.set(key, Function trigger(key) {const DepSet = depmap. get(key) if (DepSet) {function trigger(key) {const DepSet = depmap. get(key) if (DepSet) { DepSet.forEach(effect => effect()) } } const product = { price: 10, num: 2, } let total = 0 let effect = () => (total = product.price * product.num Num = 5 trigger('num') console.log(total) trigger('num') console.log(total)Copy the code

Reactive dependent collection, multiple reactive collection

Const targetMap = new WeakMap() function track(target, Let depsMap = targetmap. get(target) if (! DepsMap = new Map() targetmap.set (target, depsMap)} Let depsSet = depsmap. get(key) if (! DepsSet) {// If the depsMap key does not already have a responsive dependency, DepsSet = new Set() // Add DepsMap to DepsMap. Depsset.add (effect)} function trigger(target, Const depsMap = targetmap. get(target) const depsMap = targetmap. get(target) depsMap) return const depsSet = depsMap.get(key) depsSet.forEach(effect => effect()) } const product = { price: 10, num: 3, } let total = 0 function effect() { total = product.num * product.price } track(product, 'num') effect() console.log(total) product.num = 5 trigger(product, 'num') console.log(total)Copy the code

Combined with proxy, trigger automatically

Function Reactive (target) {reactive(target) {const handler = {get(target); Key, receiver) {track(target, key) return Reflect. Get (target, key, receiver)}, set(target, key, value, Receiver) {reflect. set(target, key, value, receiver) // Trigger (target, key) when set},} return new Proxy(target, handler) } const targetMap = new WeakMap() function track(target, key) { let depsMap = targetMap.get(target) if (! depsMap) { depsMap = new Map() targetMap.set(target, depsMap) } let depsSet = depsMap.get(key) if (! depsSet) { depsSet = new Set() depsMap.set(key, DepsSet)} add(effect) function trigger(target, key) { const depsMap = targetMap.get(target) if (! depsMap) return const depsSet = depsMap.get(key) if (depsSet) { depsSet.forEach(effect => effect()) } } const product = { price: 10, num: 2, } let total = 0 const proxyProduct = reactive(product) function effect() {total = proxyproduct.price Num = 5 console.log(total) proxyproduct.price = 5 console.log(total) proxyproduct.price = 20 console.log(total)Copy the code

activeEffect

ActiveEffect = null let targetMap = new WeakMap() function effect(eff) { activeEffect = eff activeEffect() activeEffect = null } function reactive(orogin) { return new Proxy(orogin, {get(target, key, reveice) {// Who reads it, who is its dependency, Vnode can also track(target, key) return reveice}, set(target, key, value, reveice) { Reflect.set(target, key, value, reveice) trigger(target, key) }, }) } function track(target, key) { let depsMap = targetMap.get(target) if (! depsMap) { depsMap = new Map() targetMap.set(target, depsMap) } let depsSet = depsMap.get(key) if (! DepsSet) {depsSet = new Set() depsmap. Set(key, depsSet)} If (activeEffect) {depsset. add(activeEffect)}} function trigger(target, key) { const depsMap = targetMap.get(target) if (! depsMap) return const depsSet = depsMap.get(key) if (depsSet) { depsSet.forEach(effect => { effect() }) } } const product = { price: 10, num: 2, } let total = 0 const proxyProduct = reactive(product) effect(() => { total = proxyProduct.num * proxyProduct.price }) console.log(total) // 2* 10 = 20 proxyProduct.price = 50 console.log(total) // 2 * 50 = 100 proxyProduct.num = 1 console.log(total) // 1 * 50 = 50Copy the code