通過(guò) es6 Proxy 來(lái)實(shí)現(xiàn)一個(gè)數(shù)據(jù)響應(yīng)式

// obj 對(duì)象  setBind set方法  getLogger get方法
let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    // target 是要攔截的目標(biāo)  
    get(target, property, receiver) {
      getLogger(target, property)
      // target 目標(biāo)對(duì)象 property 對(duì)應(yīng)屬性 receiver setter方法
      return Reflect.get(target, property, receiver)
    },
    set(target, property, value, receiver) {
      setBind(value, property)
      // 相當(dāng)于 vue的 $set
      return Reflect.set(target, property, value)
    }
  }
  // obj 需要攔截的對(duì)象  handler 攔截行為
  return new Proxy(obj, handler)
}

let obj = { a: 1 }
let p = onWatch(
  obj,
  (v, property) => {
    console.log(`監(jiān)聽(tīng)到屬性${property}改變?yōu)?{v}`)
  },
  (target, property) => {
    console.log(`'${property}' = ${target[property]}`)
  }  
)
p.a = 2   // 輸出 監(jiān)聽(tīng)到屬性a改變?yōu)?
p.a         // 輸出 'a' = 2