《Vue设计与实现》第四章 第五节 调度执行

1.《Vue设计与实现》第四章 第五节 调度执行

我们如果能实现，决定副作用函数执行的时机，次数及方式。

我们可以为effect函数设计一个选项参数options，允许用户指定调度器。

effect(() => {
	console.log(obj.foo);
}, {
	scheduler(fn) {
		
	}
})

effect函数定义时

function effect(fn, options = {}) {
	const effectFn = () => {
		cleaunp(effectFn);
		activeEffect = effectFn;
		effectStack.push(effectFn);
		fn();
		effectStack.pop();
		actvieEffect = effectStack[effectStack.length - 1];
	}
	effectFn.options = options;
	effectFn.deps = [];
	effectFn();
}

在trigger函数中

function trigger(target, key, value) {
	const depsMap = bucket.get(target);
	if (!depsMap) return;
	const deps = depsMap.get(key);
	const effectToRun = new Set();
	deps && deps.forEach(item => {
		if (item !== activeEffectFn) {
			effectToRun.add(item);
		}
	})
  effectToRun.forEach(item => {
		if (item.options.scheduler) {
			item.options.scheduler(item);
        } else {
			item();
		  }
	})
}

敲重点

1. 在调用effect函数时，传递第二个参数一个对象，包含scheduler函数
2. 将副作用函数添加options属性，值为effect的第二个参数
3. 需要触发副作用函数时，我们需要检查options中是否存在 scheduler函数
4. 如何存在scheduler函数，我们最终就调用这个函数，将副作用函数作为参数传递给scheduler
5. 如果不存在scheduler函数，我们就直接调用副作用函数。