浅谈vue2到vue3的区别（Proxy 篇）

vue2-3的差异作为一个面试高频的题目而受到了光大前端同学的关注下面小编就结合自己的理解试着说一说他们之间的区别

Proxy 替换Object.defineProperty()

在 Vue 2 中，Vue.js 使用 Object.defineProperty() 来实现响应式系统。这个方法通过在对象上定义 getter 和 setter 来追踪对属性的访问和修改。然而，它有一些局限性，比如无法监视数组的变化和动态添加属性。

Vue 3 引入了 Proxy 对象作为其响应式系统的基础。Proxy 对象允许您创建一个代理，可以拦截并定义基本操作的自定义行为。相比于 Object.defineProperty()，Proxy 提供了更灵活的方式来实现响应式。

以下是 Proxy 相对于 Object.defineProperty() 的优势：

1. 更全面的拦截：

   • Proxy 允许您拦截更多类型的操作，包括属性的读取、设置、删除等。相比之下，Object.defineProperty() 只能拦截属性的读取和设置。

2. 支持数组的变化：

   • 使用 Proxy 可以直接拦截数组的变化，包括数组元素的增加、删除和重排等操作。而 Object.defineProperty() 无法直接监视数组的变化，需要通过一些额外的处理来实现。

3. 动态添加属性：

   • 使用 Proxy 可以拦截动态添加属性的操作，包括使用 Vue.set() 或 this.$set() 来向响应式对象添加新属性。而 Object.defineProperty() 无法拦截这些动态添加属性的操作。

4. 性能优化：

   • 由于 Proxy 提供了更全面的拦截和更灵活的实现方式，通常情况下比 Object.defineProperty() 更高效。例如，在某些情况下，Proxy 可以直接在 JavaScript 引擎层面优化代理的行为，而无需额外的操作。

5. 更易于使用和理解：

   • Proxy 提供了一种更直观和易于理解的方式来定义响应式行为，特别是对于动态添加属性和数组变化等场景。这使得 Vue 3 的响应式系统更加易于使用和扩展。

关于Proxy 替换的一些细节

        其实vue3并没有完全放弃Object.defineProperty用Proxy来全面代替，如果有阅读useReactive和useRef的源码部分的同学就会发现它的内部逻辑大概是这样子的：

        首先如果开发者定义了一个useRef () 那么内部执行的时候首先会判断你的数据类型 如果是useRef对象就会直接返回 如果是一个引用类型的数据那么在创建useRef对象时createRef的函数会在内部调用useReactive从而创建一个Proxy进行数据监听，如果定义的useRef是一个非引用类型的时候那么useRef还是会通过Object.defineProperty进行监听数据的变化

以上就是小编对Proxy替换object.defineProperty()的一些理解，之后会继续更新关于vue2-3的其他方面的差异