Vue2 Object.defineProperty VS Vue3 Proxy

普通的 Javascript 对象作为 data 选项传给应用或组件实例的时候，Vue 会使用带有 getter 和 setter 的处理程序遍历其所有 property，并将其转换为 Proxy。这是 ES6 仅有的特性，但是我们在 Vue3 版本也使用了 Object.defineProperty 支持 IE 浏览器。虽然两者具有相同的 Surface API，但是 Proxy 版本更精简，同时提升了性能。

Vue3 使用 ES6 的 Proxy 作为观察者机制，取代之前使用的 Object.defineProperty。在 Vue3 中，Proxy 会被优先使用，只有浏览器不支持 Proxy 时才使用 Object.defineProperty。

一、Object.defineProperty 存在的问题

Object.defineProperty 只能劫持对象的属性，而 Proxy 是直接代理对象。由于 Object.defineProperty 只能对属性进行劫持，故需要遍历对象的每个属性，如果属性值也是对象，则需要深度遍历。而 Proxy 直接代理对象，不需要遍历操作。

Object.defineProperty 无法监控到数组下标的变化，因此直接通过数组的下标给数组设置值时，不能实时响应。为了解决这个问题，经过 Vue 内部处理后可以使用以下几种方法来监听数组：push() 、pop() 、shift() 、unshift() 、splice() 、sort() 、reverse()。

由于只针对了以上7种方法进行了处理，故其他数组的属性是检测不到的，这样会存在一定的局限性。

Object.defineProperty 对新增属性需要手动进行 Observe。由于 Object.defineProperty 劫持的是对象的属性，故新增属性时，需要重新遍历对象，对其新增属性对象使用 Object.defineProperty 进行支持。也正因如此，使用 Vue 给 data 中的数组或对象新增属性时，需要使用 vm.$set 才能保证新增的属性也是响应式的。

二、Proxy 的优点

什么是 Proxy？Proxy 是 ES6 中新增的一个特性，翻译过来的意思是“代理”，即表示由它来“代理”某些操作。Proxy 让我们能够以简洁易懂的方法控制外部对象的访问，其功能非常类似于设计模式中的代理模式。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象进行访问，都必须先通过这层拦截，因此提供了一种可以对外界的访问进行过滤和改写的机制。

Proxy 有如下的两个优点：

• 可以劫持整个对象，并返回一个新对象
• Proxy 支持 13 种拦截操作：

get(target, propKey, receiver)：拦截对象属性的读取，比如 proxy.foo 和 proxy[‘foo’]

set(target, propKey, value, receiver)：拦截对象属性的设置，比如 proxy.foo == v 或 proxy.foo 和 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)