数据劫持（属性代理）

一、什么是数据劫持

数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。

比较典型的有两种方式object.defineProperty（） 和es2015中新增的proxy对象 。数据的劫持最著名的应用当属双向绑定。

vue2用的是Object.defineproperty（）
vue3用的是proxy进行实现

Object.defineproperty（）

let obj = { name: "李思思" }
Object.defineProperty(obj, "age", {
    // value: 30,
    // writable: true,
    get() {//get和set的是可访问器属性
        return newvalue
    },
    set(value) {
        newvalue = value;
    },
    enumerable: true,

    configurable: true
})
obj.age = 30
console.log(obj)
//obj不会触发set方法

什么是Reflect？

为操作对象而提供的新的API

为什么设计Reflect

（1）将Object对象的属于语言内部的方法放到Reflect对象上，即从Reflect对象上拿Object对象内部方法。
（2）将用 老Object方法 报错的情况，改为返回false

proxy

proxy它可以理解为Object.defineproperty（）升级版

let obj = {
    name: "lisi"
}
let handler = {
    get(target, key, receiver) {
        console.log('get', key)
        return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
        console.log('get', key, value)
        return Reflect.set(target, key, value, receiver)
    }
}
let proxy = new Proxy(obj, handler);
proxy.name = 'san1'
console.log(proxy)
//{ name: 'san1' }