reactive, effect 大家都清除 ,但是对于scheduler, stop等方法是需要看源码咋们才能明白的😃😃😃，在上一节中，咋们用 pnpm 搭建了一个和vue3一样的monorepo，这一节中，就使用这个方式在里面填充vue3的源码吧！本节的源码请查看
目标
本次目标主要是实现，reactive，effect stop, onstop, scheduler 等
为了方便大家的理解，这一次咋们就从 测试用例的角度，来写出源码，vue3的响应式相信大家都用过，那么用测试用例来描述则是这样的。
test('响应式数据测试', () => { // 创建一个响应式对象 const origin = reactive({ num: 1 }) let newVal; // 依赖收集 effect(() => { newVal = origin.num }) expect(newVal).toBe(1) // update 更新阶段 origin.num = 2 expect(newVal).toBe(2) })
在上面的测试用例中，有两个关键的函数reactive和effect,一个是创建响应式对象，另一个则是收集依赖，这个测试用例有点大，一次性实现不太方便，咋们可以把这任务拆分为更小的模块（任务拆分），分别写两个测试用例来测试reactive和effect
reactive
看到reactive 想必都不陌生，传入一个对象，返回一个代理对象即可。那测试用例如下：
test('测试reactive', () => { let obj = { num: 1 } const proxyObj = reactive(obj) expect(obj).not.toBe(proxyObj) expect(proxyObj.num).toBe(1) // update set proxyObj.num = 2 expect(obj.num).toBe(2) })
需求： 根据测试用例可以看出，调用reactive后，返回的结果和原对象不是同一个，并且将代理对象数据发生改变后，原对象的数据也会相应改变
export function reactive(obj) { if (!isObj(obj)) return obj; return new Proxy(obj, { get(target, key, receiver) { const value = Reflect.get(target, key, receiver) // todo 依赖收集 if (isObj(value)) { return reactive(value) } return value }, set(target, key, value, receiver) { const result = Reflect.set(target, key, value, receiver) // todo 触发依赖 return result }, }) }
根据上面代码，可以运行测试用例，发现是没有问题的ヾ(≧▽≦*)o,但是在这里还有两个todo没有实现，分别是依赖收集和触发依赖
effect
effect函数可能有小伙伴不清除，这里解释下它的作用：调用effect后，里面的函数会立马执行一次哦,根据这个需要咋们写出以下测试用例：
test('effect是接受一个函数，当执行effect的时候，内部的函数会执行', () => { const fn = jest.fn(); effect(fn) expect(fn).toBeCalledTimes(1) })
根据需要来实现下effect函数
export function effect(fn){ fn() }
上面的函数运行测试用例是没有问题的，但是咋们在深入一点，effect的作用是在trigger的时候来收集当前的fn，并且对外提供一个run函数，我想啥时候调用就啥时候调用，那么咋们是不是可以对fn进行包装一下。
class EffectReactive { fn: Function constructor(fn) { this.fn = fn } run(){ this.fn() } } export function effect(fn){ const _effect = new EffectReactive(fn) _effect.run() }
对于effect的需要先到这儿，既然effect可以进行run函数了，接下来实现下trigger 和 track
trigger 和 track
需求：
1.trigger是在get到时候进行依赖收集
2.track 是在set的时候进行依赖触发，执行每一个fn
依赖收集收集的是fn, 那么在执行run的时候是不是可以来进行收集呢？，所以定义一个全局变量activeEffect，来保存，方便后续进行收集。
在class EffectReactive 里面的run 加上：
activeEffect = this;
然后在来实现trigger和track
// 用于保存每一个target，提高效率 const targetMap = new WeakMap(); /** * 收集依赖 target（map） ---> key(map) ---> fn(set) * @param target * @param key */ export function trigger(target, key) { let depsMap = targetMap.get(target); if (!depsMap) { depsMap = new Map(); targetMap.set(target, depsMap); } // 获取key let deps = depsMap.get(key); if (!deps) { deps = new Set(); depsMap.set(key, deps); } // 如果activeEffect不存在就不需要进行收集了 if (!activeEffect) return // 收集依赖 deps.add(activeEffect) } /** * 依赖触发 * @param target * @param key * @returns */ export function track(target, key) { let depsMap = targetMap.get(target) if (!depsMap) { return } let deps = depsMap.get(key); if (!deps) { return } // 依赖触发的时候进行变量每一个fn，进行执行，就可以完成响应式的数据更新 deps.forEach(effect => { effect.run() }) }
到了这一步，就可以发现咋们一开始的那个测试用例就可以通过啦😄
返回runner
在effect函数中，咋们可以返回一个runner函数,runner可以进行手动调用，并且拿到runner里面函数的结果，测试用例如下：
test('effect 有返回值', () => { let num = 10; // effect有返回值 const runner = effect(() => { num++; return 'num' }) // effect 在一开始的时候会调用 expect(num).toBe(11) // 执行runner，并且拿到返回值 const r = runner() // effect内部也会执行 expect(num).toBe(12) // 验证返回值 expect(r).toBe('num') })
咋们来改造下代码，对于effect函数需要返回值，是不是直接在effect里面做这样的操作
return _effect.run.bind(_effect)
注意： 在class EffectReactive 中存在this绑定，所以出处需要使用bind来绑定this
面试的话，一般到这里就结束了，但是咋们是手写源码，肯定还需要往下走😎🤞😎
scheduler
scheduler的意思是调度者，作用是 当scheduler存在的时候，一开始scheduler不执行，当数据改变到时候，scheduler执行，run函数不执行，当手动调用scheduler里面的run函数的时候,直接看测试用例
test('scheduler 调度器', () => { let dummy; let run; const scheduler = jest.fn(() => { run = runner; }); const obj = reactive({ foo: 1 }); const runner = effect( () => { dummy = obj.foo; }, { scheduler } ); expect(scheduler).not.toHaveBeenCalled(); expect(dummy).toBe(1); // should be called on first trigger obj.foo++; expect(scheduler).toHaveBeenCalledTimes(1); // // should not run yet expect(dummy).toBe(1); // // manually run run(); // // should have run expect(dummy).toBe(2); })
根据需求来改造现有代码
在effect当中新增一个参数options，并且需要控制run函数的执行，run函数咋们是在track中进行执行的，所以咋们需要把scheduler传入到 EffectReactive 里面，给this进行绑定
// effect 函数 export function effect(fn, options: any = {}) { const _effect = new EffectReactive(fn, options.scheduler) ... 省略其他 } // class EffectReactive 中做以下修改 constructor(fn, public scheduler?) { this.fn = fn // 把scheduler 绑定在this当中，方便track中调用 this.scheduler = scheduler } // track 函数做以下修改 deps.forEach(effect => { if (effect.scheduler) { effect.scheduler() } else { effect.run() } })
这样的话，scheduler 的测试用例就能通过了， scheduler 的作用个人觉得可以用于 频繁修改数据，需要响应式，有点类似节流操作
stop
stop的作用是 停止数据响应，只有手动触发run的函数，数据才能够完成响应
，请查看测试用例
test("stop 停止响应", () => { let dummy; const obj = reactive({ prop: 1 }); const runner = effect(() => { dummy = obj.prop; }); obj.prop = 2; expect(dummy).toBe(2); stop(runner); obj.prop = 3 expect(dummy).toBe(2); // stopped effect should still be manually callable runner(); expect(dummy).toBe(3); });
看到stop是需要传入一个runner,这个runner是啥，就是咋们的effect函数的返回值，所以先改造下effect函数
const runner = _effect.run.bind(_effect) return runner
还需要一个stop函数
/** * 停止响应式更新 * @param runner */ export function stop(runner) { // 这里临时代码 runner.stop() }
这里请思考， runner 是effect, 控制run 是在 class EffectActive中，所以咋们还需要来改造下effect函数，把effect绑定在runner上
const runner = _effect.run.bind(_effect) // 这样就可以在class EffectActive中 进行stop控制了 runner.effect = _effect return runner
对于对外暴露的stop也需要做相应的变化
runner.effect.stop()
接下来在class EffectActive中 实现stop函数，请分析下stop函数应该怎么实现？
1.需要控制run函数的执行，是不是只需要把trigger中收集到的依赖进行清空哇,😄
2.trigger中只会收集依赖，咋们怎么进行反向收集呢？ 只需要在class EffectActive中用一个数组来接收，然后在trigger中来进行反向收集
3.在class EffectActive 中来实现清空操作即可
修改代码
// 在class EffectActive 中增加以下代码 export class EffectReactive { fn: Function; // 保存正则执行的effect,用于清除 deps = [] // 省略构造函数和run方法 stop(){ effect.deps.forEach(effectSet => { effectSet.delete(effect) }) effect.deps.length = 0 } } // 在trigger中进行反向收集 // 收集依赖 deps.add(activeEffect) activeEffect.deps.push(deps)
这样的话就可以完成测试用例了😄
在这里还可以进行优化下stop的调用，就是说在同一个 EffectActive实例中只调用一次，解决办法则是在class 中加一个变量（active）锁即可,详情查看
插曲
这里有一个问题，如果测试用例的 obj.prop = 3 改成 obj.prop++,测试用例就会有问题啦🙄🙄🙄，分析下问题，obj.prop = 3 和 obj.prop++的区别是，前者只触发set方法，而后者是先触发get方法，然后在触发set方法，触发了get方法是不是又会触发trigger来收集依赖哇，所以 obj.prop++ 在测试用例是会报错的哦！
那么如何解决呢？
咋们一起来分析下：
1.咋们是不是需要在trigger中来控制是否需要依赖收集，这里是不是可以定义一个全局变量(shouldTrack)默认是false
2.在 class EffectActive 中的run方法里面来控制变量，在run之前需要,run完之后就不需要了，如果是调用了stop后调用run就直接执行fn即可
改造源码
// 在track中加上一个控制条件 if (!shouldTrack) return // 修改 class EffectActive // 调用stop后不需要收集依赖 if (!this.active) { activeEffect = this; return this.fn() } // 收集依赖 shouldTrack = true; activeEffect = this; const result = this.fn(); // 执行fn后停止收集依赖 shouldTrack = false; return result
这样就可以通过测试用例了
onStop
onStop 是一个stop后的回调函数，这个功能我把测试用例写出来，实现留个各位看官老爷
test("events: onStop", () => { const onStop = jest.fn(); const runner = effect(() => {}, { onStop, }); stop(runner); expect(onStop).toHaveBeenCalled(); });
结果
所有测试都完成通过
