Proxy 与 Object.defineProperty 优劣对比

Proxy的优势如下:

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

Object.defineProperty的优势如下:

• 兼容性好（支持IE9）

Object.defineProperty (obj, prop, descriptor) 的问题主要有三个：

• 无法监听数组的变化
  Vue 把会修改原来数组的方法定义为变异方法。
  变异方法例如 push、pop、shift、unshift、splice、sort、reverse等，是无法触发 set 的。
  非变异方法，例如 filter，concat，slice 等，它们都不会修改原始数组，而会返回一个新的数组。
  Vue 的做法是把这些变异方法重写来实现监听数组变化。

• 必须遍历对象的每个属性
  使用 Object.defineProperty 多数情况下要配合 Object.keys 和遍历，于是就多了一层嵌套。
  并且由于遍历的原因，假如对象上的某个属性并不需要“劫持”，但此时依然会对其添加“劫持”。

• 必须深层遍历嵌套的对象
  当一个对象为深层嵌套的时候，必须进行逐层遍历，直到把每个对象的每个属性都调用 Object.defineProperty() 为止。