面试题：Vue 3的Proxy响应式系统与Vue 2的Object.defineProperty相比有哪些优势

深度监听：
- Vue 2：使用 Object.defineProperty 进行深度监听时，需要递归遍历对象的所有属性，对每个属性都使用 Object.defineProperty 进行劫持，这在数据层级较深时性能开销较大。例如，对于多层嵌套的对象，每一层的属性都要重复进行类似操作，性能随着嵌套层数增加而显著下降。
- Vue 3：Proxy 可以直接对整个对象进行代理，无需递归遍历每个属性，在处理深层嵌套数据时性能更优。它是对整个对象进行劫持，在访问或修改对象属性时，通过 Proxy 的拦截器来处理，大大减少了初始化时的性能开销。
数组监听：
- Vue 2：对数组的变异方法（如 push、pop 等）进行了特殊处理，通过重写数组原型方法来实现响应式。但对于直接通过索引修改数组元素或修改数组长度等操作，无法自动触发视图更新，需要手动调用 Vue.set 等方法，且这种重写原型方法的方式在性能上也有一定的额外开销。
- Vue 3：Proxy 对数组的监听更加自然，它可以拦截所有的数组操作，包括通过索引修改元素和改变数组长度等，不需要像Vue 2那样进行特殊处理，性能相对更好，也更符合开发直觉。

新增拦截操作：
- Vue 2：Object.defineProperty 只能对属性的读取（get）和赋值（set）进行拦截，功能较为单一。对于一些特殊的操作，如 delete 删除属性、Object.keys 获取对象所有键等操作，无法直接拦截并进行自定义处理。
- Vue 3：Proxy 提供了丰富的拦截方法，除了基本的 get 和 set 外，还能拦截 deleteProperty、ownKeys 等多种操作。这使得开发者可以在这些操作发生时进行更灵活的自定义逻辑，大大增强了响应式系统的功能拓展性。例如，可以在 deleteProperty 拦截器中实现一些数据清理或更新关联数据的操作。
代理对象增强：
- Vue 2：基于 Object.defineProperty 实现的响应式对象本质上还是普通对象，没有额外的增强。
- Vue 3：Proxy 创建的代理对象可以对目标对象进行更全面的包装，并且可以通过 Proxy 的配置选项来定制代理对象的行为。例如，可以设置 Proxy 的 has 方法来定制 in 操作符的行为，这在某些复杂业务场景下非常有用。

代码简洁性：
- Vue 2：由于 Object.defineProperty 需要针对每个属性进行劫持，在处理复杂对象结构时，代码量会随着属性数量和嵌套层级的增加而迅速增多。例如，对于多层嵌套对象的深度监听，需要编写大量的递归代码来实现，使得代码逻辑变得复杂，可读性和维护性降低。
- Vue 3：使用 Proxy 只需对整个对象进行代理，代码逻辑更加简洁明了。不需要像Vue 2那样编写大量的递归遍历和属性劫持代码，开发者可以更专注于业务逻辑的实现，降低了代码的维护成本。
可维护性：
- Vue 2：当对象结构发生变化时，例如添加或删除属性，可能需要手动调整递归劫持的逻辑，这增加了维护的难度和出错的可能性。
- Vue 3：Proxy 的统一代理机制使得对象结构的变化对响应式系统的影响较小。无论对象结构如何变化，Proxy 都能通过其拦截器统一处理，开发者只需要关注业务逻辑中的数据操作，无需担心底层响应式实现的调整，提高了代码的可维护性。

星途面试题库