持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
本文介绍vue2和vue3的
响应式原理，V3解决了V2响应式上的缺陷，结尾简单介绍vue2和vue3的主要区别
一、vue2的响应式原理
vue2的响应式是通过数据劫持方法结合发布者——订阅者模式实现的。
Object.defineProperty 方法劫持 get 和 set 两个属性：
- 当监测的属性被访问时，会调用
get函数，该函数的返回值会当做属性的值； - 当监测的属性被修改时，会调用
set函数修改属性的值，它的形参就是修改后的新值，并且通知watcher更新视图。vue2会遍历对象的所有的属性，使用Object.defineProperty方法给每一个属性都添加get和set，实现监听。
vue2响应式的缺陷
（1）无法监听数组的元素操作，比如数组长度的变化(push、pop等方法能被监测到，是因为vue2重写了这些方法)
（2）无法监听对象新增 / 删除的属性
（3）深度监听需要一次性递归；需要一次性递归劫持数据， 就算那个变量没有用到，也需要先劫持，给对象给每个属性都添加get和set，如果属性本身也是一个对象，需要对这个属性也进行一次遍历，性能较差
二、vue3的响应式原理
vue3使用proxy实时监听，proxy监听的是一整个对象，并且进行惰性递归，这个对象的所有操作都会被监听到，这样就代理了所有属性。解决了vue2的缺陷，但是也有了新问题，也就是使用数据变麻烦了，因为proxy方法返回的是一个对象，导致使用变量的时候需要通过对象.value的方式才能拿到值。proxy有兼容性的问题，还不支持IE，Objec.defineProperty支持IE9及以上版本。
三、vue2和vue3的区别
- vue3更好的支持了TS
- vue3使用组合式API
- vue3出了一个新的打包工具vite，提高了打包速率
