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

·  阅读 250
2020年9月19日北京凌晨,代号为One Piece的Vuejs 3.0 终于发布了。该完整版的开发周期长达两年多官方表示:尽管框架的某些子项目可能仍需要进一步的开发才能达到稳定状态(特别是 devtools 中的路由和 Vuex 集成),不过现在仍然是开始使用 Vue 3 启动新项目的合适时机。
如果还有人不知道新系统或者吐槽
「新系统结构像意大利面,甚至说抄袭React」

,小编只能说你真的不懂3.0的Vue好在哪?本篇文章整理了此次版本中更新的5大亮点,带你全面认知新系统。

**试问,如果你正好有手上有正在做的Vue项目,而你正好采用了新版本将项目升级和重构,最后的成品KPI难道不香吗?**

01分离内部模块

Vue3.0 核心仍然通过一个简单的。新的架构为源码提供了更好的可维护性,并允许终端用户通过 tree-shaking 的形式来减少一半的运行时体积。

**高级算法**
  • 编译器支持自定义 AST 转换,用于在构建时自定义(如,在构建时进行 i18n 操作

  • 核心运行时提供了一系列 API,用于针对不同渲染目标(如native moileWebGL终端)的自定义容器。默认的 DOM 渲染器也使用这系列 API 构建。

  • @vue/reactivity 模块导出的功能,可以直接访问 Vue 的响应式系统。并且可以作为一个独立的包进行使用。它可以与其他模块解决方案配对使用(如 lit-html),甚至是在非 UI 场景中使用。

02用于解决规模问题的全新API

在 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 ,其被称之为副作用,是立即执行传入的一个函数,可以响应式追踪其依赖,并在其依赖变更时重新运行该函数。

03性能提升

与Vue 2 相比,Vue 3在捆绑包大小(通过tree-shaking减轻了多达41%的重量),初始渲染(加快了多达55%的速度),更新(加快了133%的速度)和内存使用率方面(最多减少54%)表现出了显著的性能改进。

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

04改进与TypeScript的兼容

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

05ENDING

试问,当你在年终总结or述职or面试时加上这样一句话:

**「我,带领团队成员用最新版本的Vue完成了项目的重构,包括逻辑重构和语法升级,全面适配 Vue 3!打包的效率提升N倍!页面的响应速度提升N倍!」**还怕你的老板不提拔你?同办公室的女同事不仰慕你?

分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改