通过 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
