用 proxy 实现简易的数据响应式

通过 es6 Proxy 来实现一个数据响应式

// obj 对象  setBind set方法  getLogger get方法
let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    // target 是要拦截的目标  
    get(target, property, receiver) {
      getLogger(target, property)
      // target 目标对象 property 对应属性 receiver setter方法
      return Reflect.get(target, property, receiver)
    },
    set(target, property, value, receiver) {
      setBind(value, property)
      // 相当于 vue的 $set
      return Reflect.set(target, property, value)
    }
  }
  // obj 需要拦截的对象  handler 拦截行为
  return new Proxy(obj, handler)
}

let obj = { a: 1 }
let p = onWatch(
  obj,
  (v, property) => {
    console.log(`监听到属性${property}改变为${v}`)
  },
  (target, property) => {
    console.log(`'${property}' = ${target[property]}`)
  }  
)
p.a = 2   // 输出 监听到属性a改变为2
p.a         // 输出 'a' = 2