vue 3.0优势

VUE3.0亮点

Performance (比 vue2 runtime快了2倍)
Tree shaking（按需编译代码）
Ts support （更优秀的Ts支持）
Composition API（组合 API）
Custom Renderer API （自定义渲染器）
内置新特性组件

性能

重写了虚拟 dom 的实现
vue3.0将 vdom 更新性能由与模版整体大小 相关提升为与动态内容的数量相关
优化插槽生成
在当前的 Vue 版本中，当父组件重新渲染时，其子组件也必须重新渲染。 使用 Vue 3 ，可以单独重新渲染父组件和子组件
编译模板的优化(运行时编译)
使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。
update 性能提高
Object.defineProperty是一个相对比较昂贵的操作，因为它直接操作对象的属性，颗粒度比较小。将它替换为es6的Proxy，在目标对象之上架了一层拦截，代理的是对象而不是对象的属性。这样可以将原本对对象属性的操作变为对整个对象的操作，颗粒度变大。
SSR 速度提高

VUE3.0 VS VUE2.0

Tree shaking

按需打包
Vue2 纯 helloWorld：31.94kb 当 Javascript 项目达到一定体积时，将代码分成模块会更易于管理。但是，当这样做时，我们最终可能会导入实际上未使用的代码。Tree Shaking 是一种通过消除最终文件中未使用的代码来优化体积的方法。 Tree Shaking 在 Webpack 中的实现，是用来尽可能的删除没有被使用过的代码，一些被 import 了但其实没有被使用的代码。
Tree shaking是基于ES6模板语法（import与exports），主要是借助ES6模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量
Tree shaking无非就是做了两件事：
编译阶段利用ES6 Module判断哪些模块已经加载
判断那些模块和变量未被使用或者引用，进而删除对应代码

当前在2.x中，所有全局API都在单个Vue对象上公开：

在3.x中，只能将它们作为命名导入进行访问：

TypeScript Support

fragment

不再限于模板中的单个根节点

composition API

灵活的逻辑组合与复用
使用传统的option配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的
响应式对象
ref(单独地为某个数据提供响应式能力)
reactive(给一整个对象赋予响应式能力)
生命周期
onMounted
onUnmounted

compositon-api提供了一下几个函数

reactive
Reactive 相当于当前的 Vue.observable () API，经过reactive处理后的函数能变成响应式的数据，类似于option api里面的data属性的值

watchEffect
Vue 中检测状态变化的方法，我们可以在渲染期间使用它。 由于依赖关系跟踪，当反应状态发生变化时，视图会自动更新。

toRefs
toRefs API提供了一个方法可以把reactive的值处理为ref

生命周期的hooks
方法与option api基本一致

composition api如何组织代码

composition api如何组织代码往往是把一个功能的所有状态、方法、都封装到一个函数里面，方便统一管理，如果你按照这种方式来写代码，那么代码的结构大致如下当我们哪个功能需要再其他组件被复用的时候，直接把相关的方法提取出去，然后再引用进来就可以了

可以看出composition api的面向人群主要是经常写轮子或者框架的开发者，因为他更灵活，可以写出高内聚、低耦合的代码

使用vue3的过程中也不是一定要用composition api的，如果业务不是很复杂使用option api也是没什么问题的。

欢迎关注我的个人技术公众号