各框架 Reactivity 学习

vue

let obj = {html = ''}

function a(){
  console.log('html',html)
  document.querySelector('#app').innterHTML = html
}

function b(){
  obj.html = 'b'
}

b() // 

第一次学习

// 全局变量
let activeEffect = function(){}
activeEffect.deps = []
const targetMap = new WeakMap()
const effectQueue = []
 
 

/**
*  数据结构
*  { // WeakMap
*    target:{ // Map
*      key:[] // Set
*    }
*  }
*/
function trace(target,key){
 
  let depsMap = targetMap.get(target)
  if(!targetMap.get(target)){
    targetMap.set(target, depsMap = new Map())
  }
  
   let depsSet = depsMap.get(key) || new Set()
   depsSet.set(activeEffect)
  activeEffect.deps.push()
 
}

// 执行依赖函数
function trigger(target, key){
  // 循环 set 执行每一个item函数
 const depsSet =  targetMap.get(target).get(key)
  [...depsSet].forEach(fn => fn())
}

function effect(fn){
  const effect = reactiveEffect(fn)
  
  return effect
  
}
 function reactiveEffect(fn){
   // 处理嵌套的effect
   if(effectQueue.indexOf(fn) !== -1){
    activeEffect =  effectQueue[effectQueue.length -1]
}else{
  effectQueue.push(fn)
  // 好像是fn.raw
  activeEffect = fn
}
  effectQueue.push(fn)
}

const newObj = Proxy(obj, {
   get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
     
     // 收集依赖
     trace(target,key)
     
    return Reflect.get(target, propKey, receiver);
  },
  set:function(target, propKey,value, receiver){
      console.log(`setting ${propKey}!`);
    
    // 执行依赖函数
    trigger(target,key)
    
   return Reflect.set(target, propKey, value,receiver)
}
})

Formily

Mobx