《Vue设计与实现》第四章 第三节 嵌套的effect

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();
}

结果时这样的

结论

1. 在同一时间内activeFffect 变量只能为一个值。
2. 内层的副作用函数，会覆盖外层的副作用函数。
3. 所以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嵌套的问题。