effect 依赖收集
了解过 Vue2 原理的再看 Vue3 的依赖收集原理很容易理解，同样的 get 时收集依赖，set 时出发依赖，区别在于将之前的 Object.defineProperty 替换为了 Proxy，Proxy 的功能比之前强大数倍
Proxy 的语法：new Proxy(target, handler)
target: 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler: 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为
更多内容可以看 MDN——Proxy
采用 TDD（测试驱动开发）的方式来写代码，所以我们从测试用例出发，先写测试用例，将之前的测试文件删除，新建 effect.spec.ts
describe('effect', () => { it('happy path', () => { //* 这里的reactive 并没有实现， //* 我们的目的就是实现 reactive， 让测试用例运行成功 const user = reactive({ age: 10 }) let nextAge; // 副作用函数 effect(() => { nextAge = user.age + 1 }) expect(nextAge).toBe(11) // user.age 发生改变时触发依赖， 此时 nextAge 就是 12 user.age++ expect(nextAge).toBe(12) }) }) 复制代码
然后再新建一个 reactive.spec.ts
describe('reactive', () => { it('happy path', () => { const original = { foo: 1 }; const observed = reactive({ foo: 1 }); expect(observed).not.toBe(original); expect(observed.foo).toBe(1); }) }) 复制代码
然后我们来实现 effect，新建 effect.ts 文件。effect 接收一个函数，首先要将函数执行一次，执行的过程中读取 proxy 对象的值完成依赖收集
class ReactiveEffect { _fn: Function constructor(fn: Function) { this._fn = fn } run() { activeEffect = this this._fn() } } let activeEffect: ReactiveEffect; export function effect(fn: Function) { const _effect = new ReactiveEffect(fn) _effect.run() } 复制代码
然后是 reactive 函数， 新建 reactive.ts 文件，reactive 要做的就是对对象的代理，核心是收集依赖和触发依赖
export function reactive(raw: Record<any, any>) { return new Proxy(raw, { get(target, key) { const res = Reflect.get(target, key); // 收集依赖 track(target, key) return res; }, set(target, key, value) { const res = Reflect.set(target, key, value); // 触发依赖 trigger(target, key) return res } }) } 复制代码
然后在来实现 track 和 trigger，在 effect.ts文件中添加这两个方法
// 使用 WeakMap 将 target 作为键，值也是一个 map，key为键，key 对应的依赖是值 const targetMap = new WeakMap<object, Map<keyof any, Set<ReactiveEffect>>>() export function track<T extends object>(target: T, key: keyof T) { // target -> key -> dep // 获取 target 对应的 map let depsMap = targetMap.get(target) // 如果 depsMap 不存在，新建并赋值targetMap if (!depsMap) { targetMap.set(target, depsMap = new Map()) } // 获取 key 对应的 map let dep = depsMap.get(key) // 如果 dep 不存在，新建并赋值 depsMap if (!dep) { depsMap.set(key, dep = new Set<ReactiveEffect>()) } // 将付错用添加到 key 对应的依赖集合中 dep.add(activeEffect) } export function trigger<T extends object>(target: T, key: keyof T) { let depsMap = targetMap.get(target) // 获取 target 对应的 map let dep = depsMap!.get(key) as Set<ReactiveEffect> // 获取 key 对应的 set for (const effect of dep) { // 遍历执行副作用 effect.run() } } 复制代码
WeakMap：WeakMap 对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。 这里是弱引用，不会影响对象被垃圾回收
effect 返回 runner
effect 需要具有返回值，返回值就是 effect 接受的回调函数
it('should return runner when call effect', () => { // effect(fn) -> function(runner) -> fn -> return let foo = 10 const runner = effect(() => { foo++ return 'foo' }) expect(foo).toBe(11) const r = runner() expect(r).toBe('foo') }) 复制代码
由测试用例来实现代码，继续完善上一节的 effect 函数
class ReactiveEffect { _fn: Function constructor(fn: Function) { this._fn = fn } run() { activeEffect = this return this._fn() } } let activeEffect: ReactiveEffect; export function effect(fn: Function) { const _effect = new ReactiveEffect(fn) _effect.run() return _effect.run.bind(_effect) } 复制代码
run 方法中将返回值返回，effect函数 中将 run 方法显示绑定 this 返回
执行测试，功能实现
