[官宣] Vue 3.0 — One Piece 发布

今天,我们自豪地宣布Vue.js 3.0 “One Piece “的正式发布。这个框架的新的主要版本提供了更好的性能、更小的捆绑包大小、更好的TypeScript集成、用于处理大规模用例的新API,并为框架未来的长期迭代奠定了坚实的基础。

3.0版本代表了2年多的开发努力,包括30多个RFC,2600多个提交,来自99个贡献者的628个pull请求,以及核心仓库之外的大量开发和文档工作。在此,我们要对我们的团队成员、贡献者的拉取请求、赞助商和支持者的资金支持,以及更广泛的社区参与我们的设计讨论并为预发布版本提供反馈表示最深切的感谢。Vue是一个独立的项目,是为社区而创建的,也是由社区来维持的,如果没有您的一贯支持,Vue 3.0是不可能实现的。

进一步推进 “渐进式框架 “的概念

Vue从一开始就有一个简单的使命:成为一个任何人都能快速学会的平易近人的框架。随着我们用户群的增长,框架的范围也在不断扩大,以适应不断增长的需求。随着时间的推移,它演变成了我们所说的 “渐进式框架”:一个可以逐步学习和采用的框架,同时在用户处理越来越多的高要求场景时提供持续的支持。

今天,全球有超过130万用户*,我们看到Vue被应用于各种不同的场景,从在传统的服务器渲染的页面上添加交互性,到拥有数百个组件的完整的单页应用程序。Vue 3将这种灵活性进一步提升。

分层的内部模块

Vue 3.0核心仍然可以通过一个简单的<script>标签来使用,但它的内部结构已经被重新编写成一个解耦模块的集合。新的架构提供了更好的可维护性,并允许终端用户通过树形摇动来减少多达一半的运行时大小。

这些模块还暴露了低级别的API,解锁了许多高级用例。

  1. 编译器支持自定义AST转换,用于构建时的定制(例如构建时的i18n)。
  2. 核心运行时提供了一流的API,用于创建针对不同渲染目标(如原生移动、WebGL或终端)的自定义渲染器。默认的DOM渲染器也是使用同样的API构建的。
  3. @vue/reactivity模块导出了提供直接访问Vue的反应性系统的函数,并且可以作为一个独立的包使用。它可以与其他模板解决方案(如 lit-html)配对使用,甚至在非 UI 场景中使用。

用于解决规模问题的新API

在Vue 3中,基于对象的2.x API基本没有变化。不过,3.0还引入了Composition API–一套新的API,旨在解决Vue在大规模应用中的使用痛点。组成API建立在反应性API之上,可以实现类似于React钩子的逻辑组成和重用,比2.x基于对象的API更灵活的代码组织模式和更可靠的类型推理。

组成API也可以通过@vue/composition-api插件与Vue 2.x一起使用,目前已经有适用于Vue 2和3的组成API实用库(如vueuse、vue-composable)。

性能改进

Vue 3在捆绑大小(树形摇动时轻了41%)、初始渲染(快了55%)、更新(快了133%)和内存使用(少了54%)等方面都比Vue 2有显著的性能提升。

在Vue 3中,我们采取了 “编译器信息虚拟DOM “的方法:模板编译器执行积极的优化,并生成渲染函数代码,提升静态内容,为绑定类型留下运行时提示,最重要的是,扁平化模板内的动态节点,以降低运行时遍历的成本。因此,用户可以获得两全其美的效果:从模板中获得编译器优化的性能,或者在用例需要时通过手动渲染函数直接控制。

改进的TypeScript集成

Vue 3的代码库是用TypeScript编写的,自动生成、测试和捆绑类型定义,因此它们总是最新的。组成API与类型推理一起工作。Vetur,我们的官方VSCode扩展,现在支持模板表达式和道具类型检查,利用Vue 3的改进的内部类型。哦,如果你喜欢的话,Vue 3的排版完全支持TSX。

实验性功能

我们为Singe-File Components (SFC,又名.vue文件)提出了两个新功能。

  • <script setup>:在SFC中使用合成API的语法糖。
  • <style vars>:SFC中的状态驱动型CSS变量。

这些功能已经在Vue 3.0中实现并可用,但提供这些功能的目的只是为了收集反馈。在RFCs合并之前,它们将保持实验性。

我们还实现了一个目前未被记录的<Suspense>组件,它允许在初始渲染或分支切换时等待嵌套的异步依赖(异步组件或带有异步setup()的组件)。我们正在与Nuxt.js团队一起测试和迭代这个功能(Nuxt 3正在路上),并可能在3.1中巩固它。

分阶段发布流程

Vue 3.0的发布标志着该框架的总体准备就绪。虽然框架的一些子项目可能还需要进一步的努力才能达到稳定的状态(特别是devtools中的路由器和Vuex集成),但我们相信现在就可以使用Vue 3开始新的、绿色领域的项目。我们也鼓励库作者开始升级您的项目以支持Vue 3。

查看Vue 3库指南,了解所有框架子项目的详细信息。

迁移和IE11支持

由于时间限制,我们推后了迁移构建(V3构建与V2兼容行为+迁移警告)和IE11构建,并打算在2020年第四季度集中进行。因此,计划迁移现有的v2应用或需要IE11支持的用户应在此时了解这些限制。

下一步工作

对于发布后的近期,我们将重点关注。

  • 迁移构建
  • 支持IE11
  • 路由器和Vuex整合到新的开发工具中。
  • 对Vetur中模板类型推理的进一步改进。

目前,Vue 3 和 v3-targeting 项目的文档网站、GitHub 分支和 npm dist 标签将保持在 next-denoted 状态。这意味着npm install vue仍将安装Vue 2.x,而npm install vue@next将安装Vue 3。我们计划在2020年底前将所有的doc链接、分支和distribution标签都切换到默认的3.0。

同时,我们已经开始规划2.7,这将是2.x版本系列的最后一个计划中的小版本。2.7将从v3中回溯兼容的改进,并对使用v3中删除/更改的API发出警告,以帮助潜在的迁移。我们计划在2021年第一季度发布2.7,发布后将直接成为LTS,维护周期为18个月。

试用

要了解更多关于Vue 3.0的信息,请查看我们新的文档网站。如果您是Vue 2.x的现有用户,请直接进入迁移指南。

本文为翻译,更多更新请参考官方文档:https://github.com/vuejs/vue-next/releases

扫码关注公众号获取新鲜技术文章,免费领取前端工程师必备资源