什么是响应式

• 当数据发生变化时，所有依赖这个数据的地方都会收到通知并作出相应的更新。

Vue响应式原理

• Vue的响应式原理核心是通过数据劫持 + 发布订阅模式实现

MVP

let activeReactiveFn = null


class Depend {
  constructor(){
    this.reactiveFns = new Set()
  }

  depend(){
    if(activeReactiveFn){
      this.reactiveFns.add(activeReactiveFn)
    }
  }

  notify(){
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

// 触发Proxy的get拦截器
function watchFn(fn){
  activeReactiveFn = fn
  fn()
  activeReactiveFn = null
}

const targetMap = new WeakMap()
function getDepend(target,key){
  let map =  targetMap.get(target)
  if(!map){
    map = new Map()
    targetMap.set(target,map)
  }

  let depend = map.get(key)
  if(!depend){
    depend = new Depend()
    map.set(key,depend)
  }

  return depend
}

function reactive(obj){
  return new Proxy(obj,{
    get: function(target,key,receiver){
      const depend = getDepend(target,key)
      depend.depend()
      return Reflect.get(target,key,receiver)
    },

    set: function(target,key,newValue,receiver){
      Reflect.set(target,key,newValue,receiver)
      const depend = getDepend(target,key)
      depend.notify()
    }
  })
}

◭ MVP