初探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')  }  console.log(proxyObj.a); // 1  console.log(obj.a);   // 1  console.log(obj.fn())  // it is a function