Object.defineProperty和Proxy的区别，Vue3 为什么用Proxy替代Object.defineProperty？

[coderlfm]

Object.defineProperty 最主要不能检测新增的属性，其它的请大佬继续补充

[940820722]

Object.defineProperty ： 只能监听到对象中的每个属性而不能监听对象本身； 无法监听到对象新增的属性； 无法监听数组变化； Vue2使用Object.defineProperty对所有对象的属性进行遍历，性能较差

Proxy： 监听对象本身； 可以监听到对象新增的属性； 可以监听到数组变化； 性能较好； 监听的事件类型更多

[Moannas]

2.0中使用的是Object.defineProperty实现对属性的监听。缺点是一定要克隆一个新的对象进行操作，否则就会造成死循环。第二个缺点是如果有多个属性，那么就要定义多个Object.defineProperty去分别监听每一个属性。 3.0中使用了ES6中的新语法，用到了Proxy去实现监听，这样省去了克隆对象的步骤，同时不管有多少个属性只需要定义一次Proxy就可以实现多对象的监听，不同分别定义。

[xiaodidi9922]

Object.defineProperty ：无法监听对象属性添加和删除以及通过数组下标进行修改的变化，读写操作需要一个临时变量 Proxy：有更多的拦截方法，拦截读、写、调用、删除、new等

[zhanglongLee]

区别

Object.defineProperty ：

• 必须遍历对象的每个属性，不能监听对象本身；
• 无法监听到对象新增的属性；
• 无法监听数组变化（数组的这些方法不能触发set:push、pop、shift、unshift、splice、sort、reverse）。Vue对其变异方法进行重写；
• Vue2使用Object.defineProperty对所有对象的属性进行遍历，性能较差；

Proxy：

• 监听对象本身；
• 可以监听到对象新增的属性；
• 可以监听到数组变化；
• 性能较好；
• 监听的事件类型更多；

Vue3使用Proxy的原因：

• 可以直接监听对象本身，不需要遍历循环对象的每个属性，减少代码体积。
• 解决Vue无法监听到对象新增的属性的问题；

[yanggengzhen123]

Day2:

Object.defineProperty(obj, prop, descriptor)

• 无法监听数组的变化，所以vue2对数组的方法进行了重写
• 必须遍历对象的每个属性，无法监听到对象新增的属性

Proxy(target, handler)

• 可以监听整个对象，可以监听到数组的变化，但兼容性较差

[lianxuejie]

Object.defineProperty(obj,prop,descriptor)

• 只能代理对象属性，且对象新增属性不会监听到。
• 无法监听数组的变化

Proxy(target, handler)

• 代理的是整个对象，会自动监听对象新增的属性
• 可监听数组变化

vue3使用Proxy

• 提高性能