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
解决办法`
- 我们定义一个任务队列
- 一个标志代表是否正在刷新队列
- 创建一个 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(); // 刷新这个队列。
}
})
```