reactive.js

class Wrapper {
  constructor(value) {
    this.value = value
    this.dep = new Set()
  }
  addDep() {
    if (activeUpdate) {
      this.dep.add(activeUpdate)
    }
  }
  fireDep() {
    this.dep.forEach(dep => {
      if (typeof dep === 'function') {
        dep()
      }
    })
  }
}

const log = console.log

function refs(value) {
  let wrapped = new Wrapper(value)
  let proxyObj = new Proxy(wrapped, {
    get(obj, prop) {
      obj.addDep()
      return obj[prop]
    },
    set(obj, prop, val) {
      obj[prop] = val;
      obj.fireDep();
    }
  })
  return proxyObj;
}

let activeUpdate = null;
function autorun(fn) {
  let wrappedUpdate = () => {
    activeUpdate = wrappedUpdate
    fn()
    activeUpdate = null;
  }
  wrappedUpdate()
}

let reactiveCount = refs(0)
autorun(() => log(reactiveCount.value))
reactiveCount.value = 1
reactiveCount.value = 2
reactiveCount.value = 3