现在前端Vue框架也从2的版本升级到了3的版本，其中响应式核心就发生了修改，从Object.defineProperty的换成了Proxy，是什么原因导致更换呢，以及使用Proxy的优点，下面我们就开学习一下。
Object.defineProperty存在的弊端
1.新增对象属性或删除对象属性
Object.defineProperty是通过为属性设置getter和setter完成数据的响应式，这种方式或多或少存在一定的缺陷，比如给对象新增属性或删除属性时，就是没法监听到数据的变化。但是也是有解决方案：可以使用 Vue.set( target, propertyName/index, value )
2.不能监听数组的变化
在Vue内部是对数组的push/pop/shift/unshift/splice/sort/reverse七个方法进行了重写，实现了响应式。
但是我们直接根据数组的下标修改数据，比如Array[1]='...'， 是没有响应式的。但是可以使用重写的数组splice(start[, deleteCount[, item1[, item2[, ...]]]])，实现响应式。
Proxy对象
Proxy对象是ES6提供的一个新的API，Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy直接代理整个对象而非对象属性。同理也可以对数组进行代理。
Proxy实例 let proxy = new Proxy(target,handler)，target就是需要代理的对象，handler参数也是一个对象，用来定制拦截行为。
Proxy一共支持13种拦截操作。
- get(target, propKey, receiver) ：拦截对象属性的读取，比如
proxy.foo和proxy['foo']。 - set(target, propKey, value, receiver) ：拦截对象属性的设置，比如
proxy.foo = v或proxy['foo'] = v，返回一个布尔值。 - has(target, propKey) ：拦截
propKey in proxy的操作，返回一个布尔值。 - deleteProperty(target, propKey) ：拦截
delete proxy[propKey]的操作，返回一个布尔值。 - ownKeys(target) ：拦截
Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。 - getOwnPropertyDescriptor(target, propKey) ：拦截
Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。 - defineProperty(target, propKey, propDesc) ：拦截
Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。 - preventExtensions(target) ：拦截
Object.preventExtensions(proxy)，返回一个布尔值。 - getPrototypeOf(target) ：拦截
Object.getPrototypeOf(proxy)，返回一个对象。 - isExtensible(target) ：拦截
Object.isExtensible(proxy)，返回一个布尔值。 - setPrototypeOf(target, proto) ：拦截
Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。 - apply(target, object, args) ：拦截 Proxy 实例作为函数调用的操作，比如
proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。 - construct(target, args) ：拦截 Proxy 实例作为构造函数调用的操作，比如
new proxy(...args)。
Reflect对象
Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。
1.将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。
2.修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。
3.让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
4.Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。
Reflect对象也有13个方法
- Reflect.apply(target, thisArg, args)
- Reflect.construct(target, args)
- Reflect.get(target, name, receiver)
- Reflect.set(target, name, value, receiver)
- Reflect.defineProperty(target, name, desc)
- Reflect.deleteProperty(target, name)
- Reflect.has(target, name)
- Reflect.ownKeys(target)
- Reflect.isExtensible(target)
- Reflect.preventExtensions(target)
- Reflect.getOwnPropertyDescriptor(target, name)
- Reflect.getPrototypeOf(target)
- Reflect.setPrototypeOf(target, prototype)
以上介绍来自 es6.ruanyifeng.com/#docs/proxy ，详细用法请移步。谢谢
