Vue 3 比 Vue 2 多了很多新的特性和改进。主要包括：1、性能提升；2、组合式API（Composition API）；3、Fragments、Teleport 和 Suspense 组件；4、单文件组件（SFC）的增强；5、更好的 TypeScript 支持。
一、性能提升
Vue 3 在性能方面进行了显著的优化，相比 Vue 2，渲染速度更快，占用内存更少。具体改进包括：
- 编译器优化：Vue 3 的编译器对模板进行了更多的优化，使得生成的代码更加高效。
- 代理对象：Vue 3 使用 Proxy 对象来实现响应式系统，而不是 Vue 2 中的 Object.defineProperty。这使得 Vue 3 可以更好地处理数组和对象的变化。
- Tree-shaking 支持：Vue 3 更好地支持 Tree-shaking，这意味着可以更轻松地移除未使用的代码，从而减小打包体积。
二、组合式API（Composition API）
组合式 API 是 Vue 3 引入的一种新的编写组件逻辑的方法，它允许开发者更灵活地组织和复用代码。相比 Vue 2 中的选项式 API，它具有以下优点：
- 逻辑复用：通过组合式 API，可以将逻辑拆分成独立的函数并在多个组件中复用，而不依赖于 mixins。
- 代码组织：可以更清晰地组织代码，将相关的逻辑放在一起，而不是分散在不同的生命周期钩子中。
示例：
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
onMounted(() => {
console.log(`Component mounted with count: ${count.value}`);
});
return { count };
},
};
三、Fragments、Teleport 和 Suspense 组件
Vue 3 引入了几个新的功能组件，增强了开发体验：
- Fragments：允许组件返回多个根节点，避免在渲染多个元素时需要使用额外的包裹元素。
- Teleport：允许将组件的部分 DOM 渲染到指定的 DOM 节点之外。
- Suspense：用于处理异步组件加载，提供了更好的用户体验。
示例：
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>
</template>
四、单文件组件（SFC）的增强
Vue 3 对单文件组件进行了多项增强，使开发体验更佳：