vue3-reactivity

48 阅读1分钟

0x000000 前期准备

  1. reactive(raw:any) 将js对象转为Proxy()对象,set get监听属性变化。
   将raw处理为Proxy()对象,主要是用到set()、get()方法。
   
   set()收集依赖,targetMap() ---> depsMap ---> dep  <实质是Set()>。
       dep.add(activeEffect)//  activeEffect 就是0x000001中 _effect。
       activeEffect.deps.push(dep); // 反向收集 。 这个地方我一直不明白是个啥。
   
   get()触发依赖, 取出收集的effect,执行run方法。
       
   
  1. ReactiveEffect
    属性
    deps = [],
    方法:
    1.run() 执行创建时候的fn <0x000001中fn> 
    2.stop()

0x000001 effect() 方法梳理,创建 ReactiveEffect对象,运行run()方法。

export function effect(fn: any, options: any = {}) {
    //1.创建对象
    const _effect = new ReactiveEffect(fn, options.scheduler);
    //2.处理effect
    extend(_effect, options) // export const extend = Object.assign;
    //3.执行run(),也就是0x000000中 ReactiveEffect 1.run()。
    _effect.run();
    //4.处理runner的this指向
    const runner: any = _effect.run.bind(_effect);
    //5.绑定effect到runner()?//
    runner.effect = _effect; // 这里忘记写,报错了。 
    //6.返回
    return runner;
}

0x000002