Vue3 reactive database

Please read the following code carefully , reflection vue3 How to make responsive data ?

let temp
// reactive  Is to make an object a proxy 
 const counter = reactive({
     num: 0 });
 // effect The main responsibility is to start dependency collection , wait for get To complete the normal dependent storage 
 effect(() => (temp = counter.num));
 //  Trigger update 
  counter.num = 1;

Is there anyone here who wants to say , We are in daily development , Directly in vue On the template, there is a ref Automatically helped us with Turn on Rely on collection , When we call get Storage dependency . When things go out of whack, they will

stay vue In the source renderer.ts There is such a code snippet in

 const mountComponent: MountComponentFn = (
    initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized
  ) => {
    
  // ... Omit others 
  
  //  A method will be called here setupRenderEffect
  setupRenderEffect(
      instance,
      initialVNode,
      container,
      anchor,
      parentSuspense,
      isSVG,
      optimized
    )
  }
  
  const setupRenderEffect: SetupRenderEffectFn = (
    instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized
  ) => {
    
   const componentUpdateFn = () => {
    
   //  Omit component update logic 
   }
   
    //  This passage means to create a  ReactiveEffect  To save each individual proxy,
    //  and effect The effect is the same 
    const effect = new ReactiveEffect(
      componentUpdateFn,
      () => queueJob(instance.update),
      instance.scope // track it in component's effect scope
    )
  }

Sum up , We are Templates Use in ref,reactive Is such as vue When rendering, it will put the whole component into ReactiveEffect Dependency collection in , Throw out a run Method ,run Method is used to determine whether dependency collection is required , about ref Prepare to deal with ordinary data in another space

reactive

reactive Is used to turn an object into a proxy object ,proxy

function createReactiveObject(
  target: Target,
  baseHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>) {
    
  //  The core is  proxy
  //  The purpose is to listen to the user  get  perhaps  set  The action of 

  //  If you hit it, just return directly 
  //  Optimization points made with cache 
  const existingProxy = proxyMap.get(target);
  if (existingProxy) {
    
    return existingProxy;
  }

  const proxy = new Proxy(target, baseHandlers);

  //  Create a good  proxy  Save it ,
  proxyMap.set(target, proxy);
  return proxy;
}

effect

effect The collection dependency() function is used to turn on the collection dependency , return run function

export function effect<T = any>(
  fn: () => T,
  options?: ReactiveEffectOptions
): ReactiveEffectRunner {
    
  const _effect = new ReactiveEffect(fn);

  //  Merge options 
  extend(_effect, options);
  //  When I come in, I execute the opening run Turn on dependency collection 
  _effect.run();

  //  hold  _effect.run  This method returns 
  //  Let the user choose the time to call （ call  fn）
  const runner: any = _effect.run.bind(_effect);
  runner.effect = _effect;
  return runner;
}

//  stay ReactiveEffect run The content of the function is to enable dependency collection 
export class ReactiveEffect {
    
  active = true;
  deps = [];
  public onStop?: () => void;
  constructor(public fn, public scheduler?) {
    
    console.log(" establish  ReactiveEffect  object ");
  }

  run() {
    
    //  function  run  When , Can be controlled   Do you want to perform the next step of collecting dependencies 
    //  For now , Just execute  fn  Then the collection dependency is executed by default 
    //  Here we need to control 

    //  Whether to collect dependent variables 

    //  perform  fn  But do not collect dependencies  
    if (!this.active) {
    
      return this.fn();
    }

    //  perform  fn  Collection dependency 
    //  You can start collecting dependencies 
    shouldTrack = true;

    //  When executing, give the global  activeEffect  assignment 
    //  Use global attributes to get the current  effect
    activeEffect = this as any;
    //  Execute the  fn
    const result = this.fn();
    //  Reset 
    shouldTrack = false;
    activeEffect = undefined;

    return result;
   }
}

baseHandlers

baseHandlers It's used to deal with proxy Inside get and set Of , When proxy call get and set Will trigger the corresponding function

get The operation flow is as follows ：

set The operation flow is as follows ：

export const mutableHandlers: ProxyHandler<object> = {
    
  get:(isReadonly = false, shallow = false) {
    
  return function get(target, key, receiver) {
    
   //  Get right target Of key Value 
    const res = Reflect.get(target, key, receiver);

    //  problem ： Why  readonly  When you don't do dependency collection 
    // readonly  Words , Can not be  set  Of ,  That can't be  set  It means that it will not trigger  trigger
    //  So there is no need to collect dependencies 
    if (!isReadonly) {
    
      //  It's triggering  get  To collect dependencies 
      track(target, "get", key);
    }

      //  All that is inside is  object  All the values are in  reactive  The parcel , Become a responsive object 
      //  If you say this  res  Value is an object , So we need to get the  res  It also translates into  reactive
    if (isObject(res)) {
    
      
      // res  be equal to  target[key]
      return isReadonly ? readonly(res) : reactive(res);
    }
    return res;
  };
},
// set Value to trigger 
  set:(target, key, value, receiver) {
    
    const result = Reflect.set(target, key, value, receiver);

    //  It's triggering  set  Trigger dependency when 
    trigger(target, "set", key);

    return result;
  };,
};

track

stay get When , Notification for dependency collection ,

During dependency collection , Cache incoming objects ：

The cache dependency step here is ：

• First step ： When running counter.num It will trigger proxy Of get Method
• The second step ： There is a big picture targetMap It's a weakMap To record couter This object Whether there is , also weakMap Of key yes couter This object , To be is to use , Create if it does not exist ,counter Of value Another Map, It records counter Inside key and counter Object's key It's one-to-one
• The third step ： stay map Medium judgement key yes num Whether there is , To be is to use , If it doesn't exist, create a Set To save the current ReactiveEffect object ,ReactiveEffect Objects contain run Method wait trigger Trigger

export function track(target, type, key) {
    
  if (!isTracking()) {
    
    return;
  }
  // 1.  Based on  target  Find the corresponding  dep
  //  If it's the first time , So you need to initialize 
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    
    //  initialization  depsMap  The logic of 
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  let dep = depsMap.get(key);

  if (!dep) {
    
    dep = createDep();

    depsMap.set(key, dep);
  }

 if (!dep.has(activeEffect)) {
    
    dep.add(activeEffect);
    (activeEffect as any).deps.push(dep);
  }
}

trigger

When it comes to track Come on ,trigger What needs to be done will be much simpler

export function trigger(target, type, key) {
    

  const depsMap = targetMap.get(target);

  if (!depsMap) return;

  //  For the time being  GET  type 
  // get  Type only needs to be taken out 
  const dep = depsMap.get(key);

  //  Omit other logic 
  
  //  Trigger run function 
  for (const effect of dep) {
    
    if (effect.scheduler) {
    
      // scheduler  You can let the user choose the timing of the call 
      //  In this way, you can flexibly control the call 
      //  stay  runtime-core  in , Is to use  scheduler  Implemented in the  next ticker  Logic called in 
      effect.scheduler();
    } else {
    
    //  Trigger function 
      effect.run();
    }
  }
}

Realize it by yourself

Said so much , It is better to implement a simple responsive system by yourself

Source code address