Vue2和Vue3的响应式区别

     Proxy替代Object.defineProperty: Vue2使用了object.defineProerty ,Vue3使用了ES6的Proxy的对象来实现响应,Proxy相比于object.defineProerty具有更强大的功能,可以监听更多类型的操作,使Vue3的响应式更加高效和健壮, object.defineProerty实际上是对象里面基本方法之一，而proxy是针对整个对象所有基本方法的拦截器。

    更好的类型推断:Vue3通过TypeScript支持提供了更好的类型推断,使在开发过程中更容易发现潜在问题,提高了代码的可靠性和可维护性

       性能优化: Vue3在响应式系统和虚拟DOM方面进行了一系列优化，提升了性能和渲染效率，使得应用在大规模和复杂场景下表现更好。

Vue2是通过this.$set和this.$delete两个api去解决的

Vue3在响应式方面进行了一系列改进和优化，使得开发者能够更好地编写高效、可维护的Vue应用。

为什么要使用Object.defineProperty()？

我们对一个Object对象设置属性时，一般是通过对象的.操作符或者[]操作符直接赋值的，例如obj1.a = 1 或 obj1['a'] = 1，通过这种方式添加的属性后续可以更改属性值，并且默认该属性是可枚举的，即通过for (const key in obj1) 或 obj1.keys()均可访问到属性。如果我们想在新增属性后不允许再更改属性值或者将该属性设置为非枚举属性，那我们该如何处理呢？

此时我们就需要使用静态方法Object.defineProperty(obj, prop, descriptor)，其可以通过定义属性的元数据信息精确地控制属性的行为。

此时我们就需要使用静态方法Object.defineProperty(obj, prop, descriptor)，其可以通过定义属性的元数据信息精确地控制属性的行为。

obj: 要添加属性的对象

prop: 要定义或修改的属性的名称

descriptor: 要定义或修改的属性描述符