为什么Proxy被vue选中

一. 了解Proxy

1.先看下定义：

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

是不是和defineProperty()的set,get起到的作用是是不是很像。（想了解defineProperty的戳：https://blog.csdn.net/weixin_44989478/article/details/108849021）

语法：

let  pro= new Proxy(target, handler);

• target: 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
• handler: 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 pro 的行为。

实例：

let obj={};
let proxy = new Proxy(obj, {
  get: function(target, propKey) {
    return 7269;
  }
});

proxy.time // 7269
proxy.name // 7269
proxy.title // 7269

Proxy的第一个参数obj就是目标对象，get方法的两个参数分别是目标对象和所要访问的属性。可以看到，由于拦截函数总是返回7269，所以访问任何属性都得到7269。

注意，要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是空对象）进行操作。

如果handler没有设置任何拦截，那就等同于直接通向原对象。

var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b

上面代码中，handler是一个空对象，没有任何拦截效果，访问proxy就等同于访问target。

同一个拦截器函数，可以设置拦截多个操作

var handler = {
  get: function(target, name) {
    if (name === 'prototype') {
      return Object.prototype;
    }
    return 'Hello, ' + name;
  },

  apply: function(target, thisBinding, args) {
    return args[0];
  },

  construct: function(target, args) {
    return {value: args[1]};
  }
};

var fproxy = new Proxy(function(x, y) {
  return x + y;
}, handler);

fproxy(1, 2) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo === "Hello, foo" // true

const target = {
  notProxied: "original value",
  proxied: "original value"
};

const handler = {
  get: function(target, prop, receiver) {
    if (prop === "proxied") {
      return "replaced value";
    }
    return Reflect.get(...arguments);
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.notProxied); // "original value"
console.log(proxy.proxied);    // "replaced value"

2.对比
Proxy 的优势如下:

1. Proxy 可以直接监听对象而非属性；
2. Proxy 可以直接监听数组的变化；
3. Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等
4. Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty
   只能遍历对象属性直接修改；
5. Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

1. 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平

2.handler 对象的方法

handler 对象的方法 一共 13 种。大多都和Object的方法功能很相似。就是和Reflect的静态方法是一样的，想要了解具体用法的：
https://blog.csdn.net/weixin_44989478/article/details/109254041

handler.getPrototypeOf(); //Object.getPrototypeOf 方法的捕捉器。

handler.setPrototypeOf(); //Object.setPrototypeOf 方法的捕捉器。

handler.isExtensible(); //Object.isExtensible 方法的捕捉器。

handler.preventExtensions(); //Object.preventExtensions 方法的捕捉器。

handler.getOwnPropertyDescriptor(); //Object.getOwnPropertyDescriptor 方法的捕捉器。

handler.defineProperty(); //Object.defineProperty 方法的捕捉器。

handler.has(); //in 操作符的捕捉器。

handler.get(); //属性读取操作的捕捉器。

handler.set(); //属性设置操作的捕捉器。

handler.deleteProperty(); //delete 操作符的捕捉器。

handler.ownKeys(); //Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。

handler.apply(); //函数调用操作的捕捉器。

handler.construct(); //new 操作符的捕捉器。