vue3 为什么要用 Proxy 替代 defineProperty

vue2.x 中的响应式是基于 defineProperty 中的 descriptor，通过属性的 getter 和 setter 监听来实现

关于 defineProperty 和 Proxy 的原理与使用

之前有写了两篇博客

• Object.defineProperty 的原理与使用
• Proxy 的原理与使用

defineProperty 的响应式存在的问题

1. 无法监听数组基于下标的修改和对于 .length 修改
2. 只有通过数组的 push()、pop()、shift()、unshift()、splice()、sort()和 reverse()等经过 vue 内部封装的数组原生方法实现响应式
3. 针对对象，defineProperty 只能劫持对象的属性，如果属性是一个对象，那么需要深度遍历
4. 无法做到对属性的添加，删除动作的监听
5. 不支持 Map、Set、WeakMap 和 WeakSet 的响应式

Proxy 的优点

1. 不支持 IE
2. 监听完整的一个对象，对操作对象的所有动作都可以监听，比如属性的读取，设置，删除和 for in 遍历等
3. 支持 Map、Set、WeakMap 和 WeakSet