先上总结：
- Composition API 组合语法带来了更好的组织代码的形式。
- 全新的响应式系统基于 Proxy，也可以独立使用。
- Vue 3 内置了新的 Fragment、Teleport 和 Suspense 等组件。
- 工程化工具 Vite 带来了更丝滑的调试体验。
- 对于产品的最终效果来看，Vue 3 性能更高，体积更小。
- 新的 RFC 机制也让我们所有人都可以参与 Vue 新语法的讨论。
- 对于 Vue 的二次开发来说，自定义渲染器让我们开发跨端应用时更加得心应手。
- 对于 Vue 的源码维护者，全部的模块使用 TypeScript 重构，能够带来更好的可维护性。
Vue2已经很好用，那为什么要升Vue3？
Vue 2 的历史遗留问题
Vue 2 响应式并不是真正意义上的代理
Vue 2 响应式是基于 Object.defineProperty() 实现的。
并不是代理，而是对某个属性进行拦截，所以有很多缺陷。
比如：删除数据就无法监听，需要 $delete 等 API 辅助才能监听到。
Vue 2的Option API 在组织代码较多组件的时候不易维护。
Vue2开发，大家最头疼的问题便是一个1000行的代码单页面
所有的 methods、computed 都在一个对象里配置，这对小应用来说还好。
但代码超过 300 行的时候，维护起来太困难了新增或者修改一个功能，就需要不停地在 data，methods 里跳转写代码，上下反复横跳
同时也导致，换一个人过来维护，所花费时间成本迅速增高。
使用 Flow.js 来做类型校验
首先从开发维护的角度看，Vue 2 是使用 Flow.js 来做类型校验。
但现在 Flow.js 已经停止维护了，整个社区都在全面使用 TypeScript 来构建基础库，Vue 团队也不例外。
社区的二次开发难度大
因为Vue 2 内部运行时，是直接执行浏览器 API 的。
但这样就会在 Vue 2 的跨端方案中带来问题，要么直接进入 Vue 源码中，和 Vue 一起维护，比如 Vue 2 中你就能见到 Weex 的文件夹。要么是要直接改为复制一份全部 Vue 的代码，把浏览器 API 换成客户端或者小程序的。比如 mpvue 就是这么做的，但是 Vue 后续的更新就很难享受到。
Vue 3 就是继承了 Vue 2 就是取其精华
依然具有的响应式、虚拟 DOM，组件化等所有优秀的特点，且去其糟粕（例如mixin）。
接下来分成 7 个具体方面展开介绍。
Vue3新特性
RFC 机制
Vue2 很长一段时间都是尤雨溪一个人维护 -> Vue3会先在 GitHub 上公开征求意见，邀请社区所有的人一起讨论，任何人都可以围观、参与讨论和尝试实现，可以在这个项目中看到每个需求从诞生到最终被 Vue 采纳的来龙去脉。
，这能帮助我们更好地了解 Vue 的发展。
响应式系统
vue2响应式原理： 浅析vue2响应式原理
vue3响应式原理： Proxy，Proxy 这个 API 就是真正的代理了，我们先看它的用法：
new Proxy(obj, { get() { }, set() { }, })
需要注意的是，虽然 Proxy 拦截 obj 这个数据，但 obj 具体是什么属性，Proxy 则不关心，统一都拦截了。而且 Proxy 还可以监听更多的数据格式，比如 Set、Map，这是 Vue 2 做不到的。
当然，Proxy 存在一些兼容性问题，但问题不大
自定义渲染器
Vue 2 内部所有的模块都是揉在一起的，这样做会导致不好扩展的问题，刚才我也提到了这一点。
Vue 3 是怎么解决这个问题的呢？那就是拆包，使用最近流行的 monorepo 管理方式，响应式、编译和运行时全部独立了
全部模块使用 TypeScript 重构
ts嘛..无需多言..
Composition API 组合语法
Vue3重头戏->组合 API。
组合优于继承，是设计模式书里写好的最佳实践，现在框架在实践
在写简单例子时，使用 Composition API 后，代码看起来很烦琐，没有 Vue 2 中 Options API 的写法简单好懂，但 Options API 的写法也有几个很严重的问题：
vue2的Options API
由于所有数据都挂载在 this 之上，因而 Options API 的写法对 TypeScript 的类型推导很不友好，并且这样也不好做 Tree-shaking 清理代码。
新增功能基本都得修改 data、method 等配置，并且代码上 300 行之后，会经常上下反复横跳，开发很痛苦。
代码不好复用，Vue 2 的组件很难抽离通用逻辑，只能使用 mixin，还会带来命名冲突的问题。
vue3的Composition API
我们使用 Composition API 后，虽然看起来烦琐了一些，但是带来了诸多好处：
把相关代码放到同个函数中,过一个月再来看看 也知道自己写了个啥
所有 API 都是 import 引入的，用到的功能都 import 进来，对 Tree-shaking 很友好，没用到功能，打包的时候会被清理掉 ，减小包的大小。
不再上下反复横跳，我们可以把一个功能模块的 methods、data 都放在一起书写，维护更轻松。
代码方便复用，可以把一个功能所有的 methods、data 封装在一个独立的函数里，复用代码非常容易。
Composotion API 新增的 return 等语句，在实际项目中使用<script setup>特性可以清除， 我们后续项目中都会用到这样的操作。
Composition API 对我们开发 Vue 项目起到了巨大的帮助。
下面这个示例图很好地说明了问题：每一个功能模块的代码颜色一样，左边是 Options API，一个功能的代码零散的分布在 data，methods 等配置内，维护起来很麻烦，而右边的 Compositon API 就不一样了，每个功能模块都在一起维护。
新的组件
Fragment: Vue 3 组件不再要求有一个唯一的根节点，清除了很多无用的占位 div。
Teleport: 允许组件渲染在别的元素内，主要开发弹窗组件的时候特别有用。
Suspense: 异步组件，更方便开发有异步请求的组件。
新一代工程化工具 Vite
Vite 不在 Vue 3 的代码包内，和 Vue 也不是强绑定
Vite 主要提升的是开发的体验，Webpack 等工程化工具的原理，就是根据你的 import 依赖逻辑，形成一个依赖图，然后调用对应的处理工具，把整个项目打包后，放在内存里再启动调试。
由于要预打包，所以复杂项目的开发，启动调试环境需要 3 分钟都很常见，Vite 就是为了解决这个时间资源的消耗问题出现的。
Webpack 要把所有路由的依赖打包后，才能开始调试。
ite 一开始就可以准备联调，然后根据首页的依赖模块，再去按需加载，这样启动调试所需要的资源会大大减少。
总结
再来看一下总结：
- 新的 RFC 机制也让我们所有人都可以参与 Vue 新语法的讨论。
- 工程化工具 Vite 带来了更丝滑的调试体验。
- 对于产品的最终效果来看，Vue 3 性能更高，体积更小。
- 对于普通开发者来说，Composition API 组合语法带来了更好的组织代码的形式。
- 全新的响应式系统基于 Proxy，也可以独立使用。Vue 3 内置了新的 Fragment、Teleport 和 Suspense 等组件。
- 对于 Vue 的二次开发来说，自定义渲染器让我们开发跨端应用时更加得心应手。
- 对于 Vue 的源码维护者，全部的模块使用 TypeScript 重构，能够带来更好的可维护性。
简而言之，Vue 3 带给我们的就是更快、更强且更易于扩展的开发体验，我们也可以用下面这个图来做个总结：
