简介
可调度性是响应系统非常重要的特性。首先我们需要明确什么是可调度性。所谓可调度，指的是当 trigger 动作触发副作用函数重新执行时，有能力决定副作用函数执行的时机、次数以及方式。
《实现vue3响应式系统核心》 系列文章
- 你还不会 Vue3 的源码么？手把手带你实现一个 vue3 响应式系统
- # 实现vue3响应式系统核心-依赖清理
- # 实现vue3响应式系统核心-嵌套effect
- # 实现vue3响应式系统核心-scheduler
- # 实现vue3响应式系统核心-computed
- # 实现vue3响应式系统核心-watch
代码地址： github.com/SuYxh/share…
代码并没有按照源码的方式去进行组织，目的是学习、实现 vue3 响应式系统的核心，用最少的代码去实现最核心的能力，减少我们的学习负担，并且所有的流程都会有配套的图片，图文 + 代码，让我们学习更加轻松、快乐。
每一个功能都会提交一个 commit ，大家可以切换查看，也顺变练习练习 git 的使用。
调度执行
场景
const obj = reactive({ foo: 1 })
effect(() => {
console.log(obj.foo);
})
obj.foo ++
console.log('结束了');
当前代码执行顺序：
1
2
结束了
现在假设需求有变，输出顺序需要调整为：
1
结束了
2
根据打印结果我们很容易想到对策，即把语句 obj.foo++ 和语句 console.log('结束了')位置互换即可。
那么有没有什么办法能够在不调整代码的情况下实现需求呢？这时就需要响应系统支持调度。
我们可以为 effect 函数设计一个选项参数 options，允许用户指定调度器：
effect(
() => {
console.log(obj.foo);
},
// options
{
// 调度器 scheduler 是一个函数
scheduler(fn) {
// ...
}
}
);
编写单元测试
it('should follow the correct order', () => {
// 保存原始的 console.log
const originalConsoleLog = console.log;
// 创建一个模拟的 console.log 函数
const mockConsoleLog = vi.fn();
global.console.log = mockConsoleLog; // 重定向 console.log 到 mock 函数
const obj = reactive({ foo: 1 })
effect(() => {
mockConsoleLog(obj.foo);
}, {
scheduler: function (fn) {
// 将副作用函数放到宏任务队列中执行
setTimeout(fn, 0);
}
})
obj.foo++;
mockConsoleLog('结束了');
// 检查调用顺序
expect(mockConsoleLog.mock.calls[0][0]).toBe(1); // 第一次调用，参数应该是 1
expect(mockConsoleLog.mock.calls[1][0]).toBe('结束了'); // 第二次调用，参数应该是 '结束了'
// 清理模拟
mockConsoleLog.mockClear();
global.console.log = originalConsoleLog; // 恢复 console.log
});
这个单元测试有点难，如果看不明白，当代码实现后，直接使用下面代码去运行，也是可以。
effect(
() => {
console.log('effect', obj.foo);
},
// options
{
// 调度器 scheduler 是一个函数
scheduler(fn) {
console.log('scheduler');
// 将副作用函数放到宏任务队列中执行
setTimeout(fn);
}
}
);
obj.foo++;
console.log('结束了');
代码实现
1、首先保存一下用户传入的 options ，将其挂载到 effectFn 函数上
export function effect(fn, options = {}) {
// ...
// 将 options 挂载到 effectFn 上
effectFn.options = options; // 新增
// effectFn.deps 用来存储所有与该副作用函数相关联的依赖集合
effectFn.deps = [];
// 执行副作用函数
effectFn();
}
2、在 trigger 函数中触发副作用函数重新执行时，就可以直接调用用户传递的调度器函数，从而把控制权交给用户
function trigger(target, key) {
const depsMap = bucket.get(target);
if (!depsMap) return;
const effects = depsMap.get(key);
const effectsToRun = new Set();
effects && effects.forEach(effectFn => {
// 如果 trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不触发执行
if (effectFn !== activeEffect) {
effectsToRun.add(effectFn);
}
});
effectsToRun.forEach(effectFn => {
if (effectFn.options.scheduler) {
effectFn.options.scheduler(effectFn)
} else {
effectFn()
}
});
}
运行单测
执行 test
之前的 case 也没有问题！
相关代码在 commit： (997ecd0)实现调度执行 ，git checkout 997ecd0 即可查看。
流程图
整体流程图：
原文链接：https://juejin.cn/post/7325629654328918068 作者：二十一_
