Vue3.0正式版我馋了，Composition-Api 真香_JavaScript

在这里插入图片描述
2020年9月19日北京凌晨，代号为One Piece的Vuejs 3.0 终于发布了。该完整版的开发周期长达两年多官方表示：尽管框架的某些子项目可能仍需要进一步的开发才能达到稳定状态（特别是 devtools 中的路由和 Vuex 集成），不过现在仍然是开始使用 Vue 3 启动新项目的合适时机。

如果还有人不知道新系统或者吐槽「新系统结构像意大利面，甚至说抄袭React」，小编只能说你真的不懂3.0的Vue好在哪？本篇文章整理了此次版本中更新的5大亮点，带你全面认知新系统。

试问，如果你正好有手上有正在做的Vue项目，而你正好采用了新版本将项目升级和重构，最后的成品KPI难道不香吗？（手动滑稽）

在这里插入图片描述
Vue3.0 核心仍然通过一个简单的<script>标签来使用，但其内部结构已经被重写，解耦成一个个模块的集合。新的架构为源码提供了更好的可维护性，并允许终端用户通过 tree-shaking 的形式来减少一半的运行时体积。

高级算法
1 .编译器支持自定义 AST 转换，用于在构建时自定义（如，在构建时进行 i18n 操作）
2 .核心运行时提供了一系列 API，用于针对不同渲染目标（如native moile、WebGL 或终端）的自定义容器。默认的 DOM 渲染器也使用这系列 API 构建。
3 .@vue/reactivity 模块导出的功能，可以直接访问 Vue 的响应式系统。并且可以作为一个独立的包进行使用。它可以与其他模块解决方案配对使用（如 lit-html），甚至是在非 UI 场景中使用

在这里插入图片描述
在 Vue 3.0 中，基于对象的 2.x API 基本没有变化，并引入了 Composition API 这套全新的API。Composition API旨在解决 Vue 在大规模应用场景中的痛点。其构建于响应式 API 之上，实现了类似于 React hook 的逻辑组成与复用，相较于 2.x 基于对象的 API 方式来说，拥有更加灵活的代码组织模式，以及更为可靠的类型推断能力。

Composition API同时还提供了适用于Vue 2.x 的版本,可通过@vue/composition-api 插件在项目中使用，目前已有适用于 Vue 2 和 Vue 3 的Composition API 实用的工具库。

举个例子
我们在工作的时候经常出现这种情况：随着业务复杂度越来越高，代码量会不断的加大。由于相关业务的代码需要遵循option 的配置写到特定的区域，导致后续的维护非常复杂，同时代码可复用性不高，一个页面组件经常写着写着就写到了三四百行去了。

这个时候，Composition API就可以解决这个问题。它为我们提供了reactive、watchEffect、computed、ref、toRefs、hooks等不同作用的函数去帮助我们。比如watchEffect ，其被称之为副作用，是立即执行传入的一个函数，可以响应式追踪其依赖，并在其依赖变更时重新运行该函数。

在这里插入图片描述
与Vue 2 相比，Vue 3在捆绑包大小（通过tree-shaking减轻了多达41％的重量），初始渲染（加快了多达55％的速度），更新（加快了133％的速度）和内存使用率方面（最多减少54％）表现出了显著的性能改进。

Vue 3中采用了「编译器信息虚拟DOM」的方法：针对模板编译器执行激进的优化并生成渲染函数代码，以提升静态内容，为绑定类型留下运行时提示。最重要的是，将内部的动态节点进行了扁平化处理，以减少运行时遍历的成本。因此用户可以两全其美，既可以通过模板优化编译器的性能，也能在需要时通过手动渲染功能直接控制。

在这里插入图片描述
Vue 3 的代码库完全采用 TypeScript 编写，具有自动生成、测试并构建类型声明的类型定义，因此它们总为最新。Composition API 可以很好的进行类型推断。Vetur，官方推出的 VSCode 插件，现已支持对模板表达式和 props 的类型检查，同时，Vue 3已全面支持 TSX 。