简单粗暴地解释数据劫持

​Vue 2.0的版本所使用的数据劫持，说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情
——ES6专题—Proxy与数据劫持​（13）

1、Object.defineProperty()

var data = {
    name:'xiaoming'
}
​
Object.keys(data).forEach(function(key){
    Object.defineProperty(data,key,{
        get:function(){
            console.log('get');
        },
        set:function(){
            console.log('监听到数据发生了变化');
        }
    })
});
data.name //控制台会打印出 “get”
data.name = 'xiaohong' //控制台会打印出 "监听到数据发生了变化"

2、Proxy (ES6新增)

//用法
var proxy = new Proxy(target, handler);

Proxy的方法：

image.png

拿get方法举例，target为目标对象，key为目标对象的key值，相当于对象的属性。

var Bao = {
    name: "LV",
    price:9999,
};
var proxyBao = new Proxy(Bao, {
    get: function(target, key) {
        if (target['price']>5000) {
          return '超出客户心理价位，不买了';
        } else {
          return '符合客户心理预期，买买买';
        }
    }
});
proxyBao.price
//"超出客户心理价位，不买了"

3、Proxy相比Object.defineProperty的优势
（用到的时候再补充）