Vue2 和 Vue3 响应式上有什么区别？ / 使用 Object.defineProperty() 来进行数据劫持有什么缺点？

1、使用 Object.defineProperty() 来进行数据劫持有什么缺点？

Vue2 使用的是 Object.defineProperty() 来实现的响应式，它需要递归的对所有的属性进行拦截，重写 getter 和 setter 函数。

而且只能劫持已有的属性，对于新增、删除属性和通过下标方式修改数组数据是拦截不到的，必须额外通过 $set、 $delete 这些 API 来手动触发页面的更新。

在 Vue 2 中，当一个对象被设置为响应式对象时，会通过 Object.defineProperty() 方法把每个属性都转换成 getter和 setter，当属性值发生变化时，会触发 setter，进而通知所有引用该属性的组件更新视图。

2、Vue2 和 Vue3 响应式上有什么区别 ？

而 Vue3 使用 ES6 的 proxy 代理的方式来处理响应式。

它和 Vue2 的区别在于，它不需要对所有属性重写 getter 和 setter，可以完美的监听到任何方式的数据改变。

除了能监听到属性的删除和新增，而且能够直接监听数组的变化，不需要对数组进行特殊的处理。

唯一的缺点是兼容性的问题，因为 Proxy 是 ES6 的语法。

相比之下，Vue 3 中的响应式系统在使用上更加方便、高效和完善。

相比之下，Proxy更强大，它可以拦截到更多的操作。包括添加、删除和遍历属性等。

此外，它还能够直接监听数组的变化，而不需要进行特殊的处理。这意味着，在 Vue3 中，开发者可以更加方便地使用响应式数据，提高开发效率。

Vue 3.x 中对于新增属性和删除属性的响应式处理更加完善和高效，无需使用 Vue.set 方法，而 Vue 2.x 中需要手动使用这些方法才能保证新增或删除属性的响应式效果。

Vue 3 中使用了递归遍历 Proxy 对象的属性，因此在访问嵌套属性时会更加方便和高效，而 Vue2 则需要通过 watch 或 computed 等方式才能实现嵌套属性的响应式。

Vue 3 中的响应式系统支持了 reactive() 和 readonly 等 API，方便开发者创建只读或可变的响应式对象。而在 Vue 2.x 中则没有这些 API。