Object.defineProperty和Proxy实现数据劫持

1. Object.definePropery

let obj = {
    name: 'zyp',
    likes: ['sleep', 'read']
};
function observe(obj) {
    Object.keys(obj).map(key => {
        reactive(obj, key, obj[key])
    })
}
function reactive(obj, key, value) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        set(val) {
            console.log('set')
            value = val
        },
        get() {
            console.log('get')
            return value
        }
    })
}
observe(obj)
obj.name = 'zyp1'
console.log('obj--->', obj)

2. Proxy

let obj = {
  name: 'zyp',
  likes: ['sleep', 'read']
};
let proxy = new Proxy(obj, {
  get(target, key) {
    console.log('get')
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    console.log('set')
    return Reflect.set(target, key, value)
  },
  deleteProperty(target, key) {
    return Reflect.deleteProperty(target, key)
  }
})
proxy.name = "zyp1"
proxy.likes.push('sing')
console.log('obj', obj)
delete proxy.name
console.log('obj', obj)

总结： 两者的区别：Object.definePropery是对对象的属性的劫持，而Proxy是对对象的劫持，因此对于新增的属性不用重新定义getter,setter特性，Proxy也可以实现劫持，同时对于复杂对象也不必进行深度遍历。Vue3中将使用Proxy来实现数据劫持。