第二篇响应系统-4.5用例错误

[Maple-Lin]

// const bucket = new Set(); //存储副作用函数的桶 const data = {foo: true, bar: true}; let temp1, temp2; let activeEffect; function effect(fn) { const effectFn = () => { cleanup(effectFn); activeEffect = effectFn; fn(); }; effectFn.deps = []; effectFn(); console.log("effectFn-->", effectFn); }

const obj = new Proxy(data, { get(target, key) { track(target, key); return target[key]; }, set(target, key, newVal) { target[key] = newVal; trigger(target, key); } });

function cleanup(effectFn) { for(let i = 0; i < effectFn.deps.length; i ++) { const deps = effectFn.deps[i]; deps.delete(effectFn); } effectFn.deps.length = 0; }

// track函数追踪变化 function track(target, key) { if(activeEffect) return; let depsMap = bucket.get(target); console.log(depsMap); if(!depsMap) bucket.set(target, (depsMap = new Map())); let desp = despMap.get(key); if(!deps) depsMap.set(key, (deps = new Set())); deps.add(activeEffect); activeEffect.deps.push(deps); }

//触发函数 function trigger(target, key) { const depsMap = bucket.get(target); if(!depsMap) return; const effectsToRun = new Set(effects); effectsToRun.forEact((effectFn) => effectFn()); } //执行 effect(function effectFn1() { console.log('effectFn1 执行'); effect(function effectFn2() { console.log('effectFn2 执行'); temp2 = obj.bar; }); temp1 = obj.foo; }); /* 嵌套的effect与effect栈的用例中，P57，无法打印出 effectFn1 执行 effectFn2 执行 effectFn2 执行 还是我自己敲错了？ */