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

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

我们要在上一章的基础上，实现一个功能。

const data = { foo:1 };
const obj = new Proxy(data, {
	get(){},
	set(){}
})

effect(() => {
	console.log(obj.foo);
})
obj.foo++;
obj.foo++;

输出

1,
2,
3,

由输出可知，字段obj.foo的值一定会从1自增到3，2只是它的过渡状态。如果我们只关心最终的结果而不关心过程，那么执行三次打印操作是多余的，我们期望的打印是:

1,
3

解决办法`

1. 我们定义一个任务队列
2. 一个标志代表是否正在刷新队列
3. 创建一个 Promise实例，我们用它将一个任务添加到微任务队列中。

代码

const jobQueue = new Set(); // 一个任务队列
const p = Promise.resolve();
let isFlushing = false;
function flushJob() {
	if (isFlushing) return; // 保证队列正在刷新，则什么都不做。
	isFlushing = true;
	p.then(() => {
		jobQueue.forEach(item => item()); // 在微任务队列中执行jobQueuq队列任务。
	}).finally(() => {
		isFlushing = false;
	})
}

effect中

effect(() => {
	console.log(obj.foo);
},{
	scheduler(fn) {
		jobQueue(fn); // 将任务添加到队列中。
		flushJob(); // 刷新这个队列。
	}

})
```