Vue2 的响应式原理

通过使用Object.defineProperty函数来实现的

在 Vue.js 中，当一个对象被传入 Vue 实例的 data 选项中时，Vue.js 会将这个对象的属性转换为 getter 和 setter，以便在属性被访问或修改时能够触发相应的更新。当属性被访问时，会触发 getter 函数，当属性被修改时，会触发 setter 函数。在 setter 函数中，Vue.js 会执行一系列的更新操作，如重新渲染视图、触发依赖的更新等。

vue3 的响应式原理

Vue 3 中使用了 Proxy 对象来实现响应式。在 Vue 3 中，当一个对象被传入组件实例的 data 选项中时，Vue 3 会将这个对象转换为一个 Proxy 对象，通过拦截对属性的访问和修改来实现响应式。与 Vue 2 中的 Object.defineProperty 相比，Proxy 具有更强大和灵活的拦截能力。

当属性被访问时，Proxy 对象会触发 get 拦截器函数，当属性被修改时，Proxy 对象会触发 set 拦截器函数。

异同点

Vue 2 使用 Object.defineProperty 函数来实现响应式，而 Vue 3 使用 Proxy 对象来实现响应式。Proxy 对象相较于 Object.defineProperty 具有更强大和灵活的拦截能力。

Vue 2 的响应式系统在对象和数组的监听方面存在一些限制。需要使用特定的数组方法（如 push、pop、splice 等）或 Vue.set 方法来触发数组的更新。而 Vue 3 的响应式系统对数组进行了改进，可以直接监听数组的索引和长度的变化。