vue3主要在哪些方面做了提升？

（大家都说的五花八门的，我稍微总结一下比较容易记的）

1、数据响应式列表重构

vue3使用proxy替代了vue2中的Object.defineProperty。Proxy是原生的JavaScript特性，提供了更加强大灵活的数据监听功能。

2、Composition API

vue3引入了组合式API，允许开发者更灵活的组合和重用代码。通过setUp方法来定义组件逻辑，并可以使用单个setUp函数来处理组件的状态、计算属性、方法等

（vue3的setup和vue2的data的对比）

• 在vue3中，响应式状态声明ref(基本数据类型、引用数据类型-底层还是reactive)、reactive(引用数据类型)。
• 在vue3中不使用this来访问数据和方法，直接使用变量名，在vue2中使用this。
• 在vue3中，使用setUp函数可以更灵活的组合和复用逻辑，在vue2中要使用mixin或者mixins来实现逻辑复用。
• setup函数是组合式api的入口，替代了vue2中的beforeCreate和Create，beforeDestroy改为beforeUnmount,destroyed改为Unmounted
• （未完。。。略乱）

3、 更好的TypeScript支持

vue3对ts的支持更友好，包括更准确的类型推导和声明。

4、Fragments

vue3的模板支持多个根节点，减少不必要的DOM包装

5、teleport（提升组件的嵌套层级）

可以将组件模板内容渲染到DOM树的其它位置，而不仅仅是当前组件的父组件

（原因：vue3的传送门机制（portal）,允许将DOM树渲染到其它位置，使其不受组件嵌套限制）

6、Suspense

用来加载异步组件未成功时的一些loading，原理是具名插槽

7、虚拟DOM优化（diff方法优化）

采用静态标记（static marking）的方式跳过静态节点的对比和更新，减少了不必要的操作，提高了渲染性能。

8、移除了不常用的api

移除filter过滤器、移除数据双向绑定修饰符 .sync，改用 v-model

9、另有一些

• vue3优化了内部结构，初次渲染以及更新渲染速度都更快了，内存也变小了。
• Tree-Shaking支持：只会将实际使用到的打包进去，减小了包的体积。
• 静态提升：vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。
• 预字符串化：vue3当编译器遇到大量连续的静态内容，会直接将它编译为一个普通字符串节点。（注意：必须是大量连续的静态内容才可以预字符串化哦，切记！目前是连续20个静态节点才会预字符串化）在vue2中，每个元素都会变成虚拟节点。
• 改用creatApp初始化实例。
• 多事件处理：在点击事件中写入多个处理函数，用逗号分割。
• 在vue3的setUp函数中，不使用this来访问数据和方法，而是直接使用变量名，在vue2中，使用this来访问数据和方法。

面试被问到可以这样答： 

1、Composition API(组合式API)

vue3引入了Composition API,相较于vue2的options API（选项式）,使得组件更易于阅读维护和重用。开发者可以根据功能或逻辑相关性将代码组织在一起而不是按照生命周期钩子函数的顺序。

2、响应式系统的改进

vue3使用了proxy作为底层实现，代替了vue2中的object.defineProperty，提供了更高效更可靠的响应式数据追踪机制。

小tips—监听数组和对象有什么不同：

vue2：defineproperty只能监听某个属性，不能全属性监听，vue2通过重写数组的原型方法来监听数组的变化(无法监控数组下标的变化，导致通过数组下标添加元素不能实时响应）。

vue3：proxy可以对整个对象进行监听，可以拦截对象所有的操作，可以检测到数组内部的变化。

3、更好的性能

通过优化虚拟dom（静态标记）和模板编译，提升了组件的渲染性能。vue3还引入了静态提升（Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用）、动态内容标记和基于proxy的响应式系统，进一步提高了应用程序的性能。

4、更小的体积

vue3通过模块化的设计，将其核心库分割成了多个小模块，使得开发者可以按需引入所需功能，从而减少了应用程序的体积，这在移动端和网络条件较差的情况下更有竞争力。

5、更好的typeScript支持

vue3对ts的支持更加完善，代码库中使用了更多的ts类型注解，提供了更好的类型推导和错误检查。

6、更好的懒加载支持

vue3默认开启了懒加载机制，可以极大地提升页面加载速度和性能。

7、更好的开发工具支持

vue3提供了全新的Devtools，具有更多的功能和改进，可以更好的帮助开发者调试和分析应用程序。

关于setUp语法糖的补充内容：

1、setUp 是组合式api的入口，可以避免在组件中写export default，data，methods等常规选项，而是直接使用Composition API。

2、setUp调用是发生在组件创建之前，props解析完成之后，无法直接使用this。

3、setUp选项是接收一个props和context函数，setUp返回的所有内容都暴露给组件的其余部分（计算属性、方法、生命周期钩子等）以及组件的模板。

4、setUp注册生命周期钩子，组合式API上的生命周期钩子和选项式API的名称相同，但前缀为on，即mounted变成onMounted（替代了vue2中的beforeCreate和Create，beforeDestroy改为beforeUnmount,destroyed改为Unmounted）。