关于vue3:实现-effect-返回-runner

effect 测试

//effect.spec.ts
 it('runner', () => {// runner 就是 effect(fn) 返回一个函数，执行该函数就相当于从新执行了一次传入 effect 的 fn
        // 同时执行 runner 也会将 fn 的返回值返回
        let foo = 1
        const runner = effect(() => {
            foo++
            return 'foo'
        })
        expect(foo).toBe(2)
        // 调用 runner
        const r = runner()
        expect(foo).toBe(3)
        // 获取 fn 返回的值
        expect(r).toBe('foo')
    })

//effect.ts
let activeEffect 
class ReactiveEffect{
    private _fn
    constructor(fn){this._fn = fn}
    run(){
        activeEffect = this
        let res =this._fn()
        // 返回执行后的 fn
        return res
    }
}
export function effect(fn){const _effect = new ReactiveEffect(fn)
    _effect.run()
    // 通过 bind 扭转 this 指向
    return _effect.run.bind(_effect)
 }