初探初探Vue3.0 中的一大亮点中的一大亮点Proxy的使用的使用
前言前言
不久前，也就是11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 Vue3.0 Updates 的主题演讲，
对 Vue3.0 的更新计划、方向进行了详细阐述，表示已经放弃使用了 Object.defineProperty，而选择了使用更快的原生 Proxy
!!
这将会消除了之前 Vue2.x 中基于 Object.defineProperty 的实现所存在的很多限制：无法监听 属性的添加和删除、数组索引
和长度的变更，并可以支持 Map、Set、WeakMap 和 WeakSet！
做为一个 “前端工程师” ，有必要安利一波 Proxy !!
什么是什么是 Proxy？？
MDN 上是这么描述的——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')
}
- 1
- 2
前往页