1.《Vue设计与实现》第四章 第三节 嵌套的effect
嵌套的effect代码
effect(effectFn1(){
console.log('effectFn1函数执行了')
effect(effectFn2(){
console.log('effectFn2函数执行了');
obj.ok;
})
obj.name;
})
从上面这段代码的执行来看
effect函数的定义
function effect(fn) {
let effectFn = () => {
activeFffect = effectFn;
cleanup(effectFn)
fn();
}
effectFn.deps = [];
effectFn();
}
结果时这样的
结论
- 在同一时间内activeFffect 变量只能为一个值。
- 内层的副作用函数,会覆盖外层的副作用函数。
- 所以obj.name, obj.ok保存的副作用函数都是同一个。
如何解决这个问题
4. 我们需要一个副作用函数栈 effectStack。
5. 在副作用函数执行时,将当前的副作用函数压入栈中。
6. 待副作用函数执行完毕之后将其从栈中弹出,并始终让activeEffect指向栈顶的副作用函数
let activeEffect;
let effectStack = [];
function effect(fn) {
const effectFn = () => {
activeEffect = effectFn;
effectStack.push(effectFn);
fn();
effectStack.pop();
activeEffect = effectStack[effectStack.length - 1];
}
effectFn.deps = [];
effectFn();
}
这样就完美的解决了这个effect嵌套的问题。