Vue中的响应式原理

1.Vue2的响应式原理

1.1 原理

使用Object.defineProperty来实现。在vue组件实例化时候，会递归遍历data的所有属性，利用Object.defineProperty中getter/setter对每个数据在读取和修改时候进行数据劫持,在数据劫持中通过执行相应watcher中的回调方法实现视图的更新。

1.2 缺点

• Object.defineProperty需要去递归遍历监听对象中的属性,计算量比较大;
• 对于对象属性的新增和删除,是无法监听到的。需用到vue.$set和vue.$delete来作为辅助；
• 需要重写数组原生方法来实现数组的监听；

2.Vue3的响应式原理

2.1 原理

用proxy代理代替Object.defineProperty来实现。

2.2 特点

• 可直接监听整个对象，不需要遍历监听属性，性能提升；
• 可直接监听数组的变化，无需重写数组的原生方法；