不久前，也就是11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 Vue3.0 Updates 的主题演讲，对 Vue3.0 的更新计划、方向进行了详细阐述，表示已经放弃使用了 Object.defineProperty，而选择了使用更快的原生 Proxy !!
这将会消除了之前 Vue2.x 中基于 Object.defineProperty 的实现所存在的很多限制：无法监听 属性的添加和删除、数组索引和长度的变更，并可以支持 Map、Set、WeakMap 和 WeakSet！
做为一个 “前端工程师” ，有必要安利一波 Proxy !!
什么是 Proxy？
上是这么描述的——Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。
官方的描述总是言简意赅，以至于不明觉厉...
其实就是在对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象，达到预期的目的~
什么？还没表述清楚？下面我们看个例子，就一目了然了~
let obj = { a : 1 } let proxyObj = new Proxy(obj,{ get : function (target,prop) { return prop in target ? target[prop] : 0 }, set : function (target,prop,value) { target[prop] = 888; } }) console.log(proxyObj.a); // 1 console.log(proxyObj.b); // 0 proxyObj.a = 666; console.log(proxyObj.a) // 888
上述例子中，我们事先定义了一个对象 obj , 通过 Proxy 构造器生成了一个 proxyObj 对象，并对其的 set(写入) 和 get (读取) 行为重新做了修改。
当我们访问对象内原本存在的属性时，会返回原有属性内对应的值，如果试图访问一个不存在的属性时，会返回0 ，即我们访问 proxyObj.a 时，原本对象中有 a 属性，因此会返回 1 ，当我们试图访问对象中不存在的 b 属性时，不会再返回 undefined ，而是返回了 0 ，当我们试图去设置新的属性值的时候，总是会返回 888 ，因此，即便我们对 proxyObj.a 赋值为 666 ，但是并不会生效，依旧会返回 888!
语法
ES6 原生提供的 Proxy 语法很简单，用法如下：
let proxy = new Proxy(target, handler);
参数 target 是用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）, 参数 handler 也是一个对象，其属性是当执行一个操作时定义代理的行为的函数，也就是自定义的行为。
Proxy 的基本用法就如同上面这样，不同的是 handler 对象的不同，handler 可以是空对象 {} ，则表示对 proxy 操作就是对目标对象 target 操作，即：
let obj = {} let proxyObj = new Proxy(obj,{}) proxyObj.a = 1; proxyObj.fn = function () { console.log('it is a function') } console.log(proxyObj.a); // 1 console.log(obj.a); // 1 console.log(obj.fn()) // it is a function
但是要注意的是，handler 不能 设置为 null ，会抛出一个错误——Cannot create proxy with a non-object as target or handler！
要想 Proxy 起作用，我们就不能去操作原来对象的对象，也就是目标对象 target （上例是 obj 对象 ），必须针对的是 Proxy 实例（上例是 proxyObj 对象）进行操作，否则达不到预期的效果，以刚开始的例子来看，我们设置 get 方法后，视图继续从原对象 obj 中读取一个不存在的属性 b ， 结果依旧返回 undefined ：
console.log(proxyObj.b); // 1 console.log(obj.b); // undefined
对于可以设置、但没有设置拦截的操作，则对 proxy 对象的处理结果也同样会作用于原来的目标对象 target 上，怎么理解呢？还是以刚开始的例子来看，我们重新定义了 set 方法，所有的属性设置都返回了 888 , 并没有对某个特殊的属性（这里指的是 obj 的 a 属性 ）做特殊的拦截或处理，那么通过 proxyObj.a = 666 操作后的结果同样也会作用于原来目标对象（obj 对象）上，因此 obj 对象的 a 的值也将会变为 888 !
proxyObj.a = 666; console.log( proxyObj.a); // 888 console.log( obj.a); // 888
API
ES6 中 Proxy 目前提供了 13 种可代理操作，下面我对几个比较常用的 api 做一些归纳和整理，想要了解其他方法的同学可自行去官网查阅 ：
--handler.get(target,property,receiver)
用于拦截对象的读取属性操作，target 是指目标对象，property 是被获取的属性名 ， receiver 是 Proxy 或者继承 Proxy 的对象，一般情况下就是 Proxy 实例。
let proxy = new Proxy({},{ get : function (target,prop) { console.log(`get ${prop}`); return 10; } }) console.log(proxy.a) // get a // 10
我们拦截了一个空对象的 读取get操作， 当获取其内部的属性是，会输出 get ${prop} ， 并返回 10 ；
let proxy = new Proxy({},{ get : function (target,prop,receiver) { return receiver; } }) console.log(proxy.a) // Proxy{} console.log(proxy.a === proxy) //true
上述 proxy 对象的 a 属性是由 proxy 对象提供的，所以 receiver 指向 proxy 对象，因此 proxy.a === proxy 返回的是 true。
要注意，如果要访问的目标属性是不可写以及不可配置的，则返回的值必须与该目标属性的值相同，也就是不能对其进行修改，否则会抛出异常~