手撸mini-vue之runner

通过一个单元测试来了解什么是runner

// effect.spec.ts
describe('effect', () => {
  ...
  it('should runner when call effect', () => {
    let foo = 10;
    let runner = effect(() =>{
      foo++;
      return 'foo'
    })
    
    expect(foo).toBe(11);
    let r = runner()
    expect(foo).toBe(12);
    expect(r).toBe('foo')
  })
})

分析上述代码可知：

1. 调用 effect 之后，返回一个 function , 这个 function 可以称之为 runner
2. 调用 runner 会执行 effect 内部的这个 fn
3. 调用 fn 会把 fn 的返回值 return 出去

代码实现

// effect.ts
class ReactiveEffect(fn) {
  private _fn;
  constructor(fn) {
    this._fn = fn;
  }
  
  run() {
    activeEffct = this;
    return this.fn()
  }
}

let activeEffct;
export function effect(fn) {
  const _effect = new ReactiveEffect(fn);
  
  _effect.run();
  
  // 处理 effect 返回值
  return _effect.run.bind(_effect);
}

注意： 在 ReactiveEffect 中将 this 赋值给了 activeEffect, 为了避免指针指向问题，通过 bind 将 this 绑定在 effect 实例上

源码地址戳这里