Object.definedProperty和Proxy经常用来实现对象的劫持
- Object.definedProperty是vue2.x拦截对象属性变化的方法，再结合订阅-发布者模式和观察者模式实现对象属性的双向绑定更新
- Proxy是vue3.0以后改进的双向绑定方案
Object.definedProperty
存在以下缺陷：
- 不能监听数组的变化
- 必须遍历对象的每个属性
- 必须深层遍历嵌套的对象
无法监听数组变化：vue无法对数组的变异方法（push、pop、shift、unshift、splice、sort、reserve）进行监听，只是对这些方法进行重载hack，达到监听变化的效果，这些重载需要一定的开销
必须遍历对象属性：vue对对象进行监听变化，需要使用Object.keys()搭配Object.definedProperty对对象的每个属性进行绑定，加大了开销
必须生成遍历对象: 针对多层嵌套的对象，则需要递归遍历进行绑定
Proxy
Proxy相对Object.definedProperty有以下优点:
- Porxy监听的是整个对象而不是对象的某个属性
- Proxy可以监听数组的变化
- Proxy有多大13中的拦截方式，比Object.definedProperty功能更强大
- Proxy结果返回的是一个新的对象，我们直接操作新的对象，而不是像Object.definedProperty遍历属性进行修改
- Proxy有着更好的性能，浏览器厂商也在不对地进行维护和加强
但Proxy也着缺陷：
Proxy的对浏览器的兼容性不够，现阶段无法用polyfill进行兼容，这也是现在不推荐使用vue3.0进行重要项目开发的原因之一，需要等待后期功能的完善
posted on
