Simple Data and Computed

Vuejs data & computed simulation

by leozcx

JavaScript

// Vue's data property
let data = {
  p1: 1,
  p2: 2
}
let dep //current dependent
let watchers = {} // hold all watchers

let computed = {
    b() {
        // Our goal: whenever data.p1 is updated, computed.b should be invoked
        console.log('computed b invoked')
        return data.p1 + '-c'
      },
      b2() {
        // like b
        console.log('computed b2 invoked')
        return data.p2 + '-c'
      }
  }
  // convert data's property to setter/getter
Object.keys(data).forEach((k) => {
    Object.defineProperty(data, k, {
      get() {
          let ws = watchers[k]
          if (!ws) {
            ws = []
            watchers[k] = ws
          }
          if (dep && ws.indexOf(dep) === -1) {
            ws.push(dep)
          }
          return this.value
        },
        set(v) {
          let ws = watchers[k]
          if (ws) {
            ws.forEach((w) => {
              w()
            })
          }

          this.value = v
        }
    })
  })
  // trigger data properties' getter
Object.keys(computed).forEach((k) => {
  let kv = computed[k]
  dep = kv
  kv()
})

data.p1 = 'a'