Vue.js 3.0 "One Piece" 已正式发布,此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API,并为框架将来的长期迭代奠基了坚实的基础。vue
3.0 版本的开发周期长达两年多,期间产生了 30+ RFCs、2600+ commits、628 pull requests,以及核心仓库以外的大量开发和文档工做。react
Vue 3.0 的发布标志着此框架总体上已处于可用状态。尽管框架的某些子项目可能仍须要进一步的开发才能达到稳定状态(特别是 devtools 中的路由和 Vuex 集成),不过如今仍然是开始使用 Vue 3 启动新项目的合适时机。官方还鼓励库做者如今能够开始升级项目以支持 Vue 3。web
分层内部模块 (Layered internal modules)npm
Vue 3.0 core 仍然能够经过<script>
标签进行使用,但其内部架构已被完全重写为一组解耦的模块。新架构提供了更好的可维护性,并容许使用者经过 tree-shaking 来减小多达一半的 runtime 大小。编程
这些模块还将许多底层 API 暴露出来,可用于许多高级用例:api
编译器为定制 build-time 提供了对自定义 AST 转换的支持(例如 build-time i18n)微信
内核 runtime 提供了优先级最高的 API,用于建立针对不一样渲染目标(例如原生移动设备、WebGL 或终端)的自定义渲染器。默认 DOM 渲染器使用相同的 API 构建架构
@vue/reactivity
模块导出的函数能够直接访问 Vue 的 reactivity 系统,其自己也能够做为一个独立的程序包使用。它还能够与其余模板解决方案(例如 vue-lit)搭配使用,甚至能够在非 UI 场景中使用app
用于处理大规模用例的新 API框架
在 Vue 3 中,基于对象的 2.x API 基本没有变化。不过 3.0 还引入了 Composition API,旨在解决 Vue 在大型应用程序中的使用痛点。Composition API 构建于 reactivity API 之上,能够实现相似于 React 钩子(React hooks)的逻辑组合和重用,与 2.x 基于对象的 API 相比,拥有更灵活的代码组织模式和更可靠的类型推导。
经过 @vue/composition-api 插件,Composition API 还能够与 Vue 2.x 搭配使用,而且目前已经有适用于 Vue 2 和 3 的 Composition API 实用程序库(例如 vueuse,vue-composable)。
提高性能
与 Vue 2 相比,Vue 3 在捆绑包体积(经过 tree-shaking 减少约 41% 大小)、初始渲染(速度提高约 55%)、更新(速度提高约 133%)和内存使用率(下降约 54%)等方面有了显著的性能提高。
Vue 3 采用了"compiler-informed Virtual DOM"的方法:模板编译器执行激进的优化并生成渲染函数代码,以提高静态内容访问速度,为绑定类型留下 runtime 提示。最重要的是,将内部的动态节点扁平化处理,以下降 runtime 遍历的成本。所以,用户能够得到一箭双鵰的效果:经过模板优化编译器的性能,或者在用例须要时经过手动渲染函数直接控制。
改进与 TypeScript 的集成
Vue 3 使用 TypeScript 编写,具备自动生成、测试和捆绑的类型定义等特性。Composition API 可与类型推导很好地搭配使用。Vetur,Vue 3 的官方 VSCode 扩展,如今支持模板表达式,以及利用 Vue 3 改进的内部类型进行 props 类型检查。
实验性功能
为单文件组件(SFC, Singe-File Components),即 .vue 文件提供了两项新特性:
<script setup>: 用于在 SFC 中使用 Composition API 的语法糖
<style vars>: SFC 中状态驱动的 CSS 变量
上述已在 Vue 3.0 中实现并可用,但仅出于收集反馈的目的而提供。在合并 RFC 以前,它们将保持实验性状态。
此外还实现了一个当前未记录的<Suspense>
组件,该组件容许在初始渲染或分支切换时等待嵌套的异步依赖项(异步组件或包含async setup()
的组件)。目前正在与 Nuxt.js 团队一块儿测试和迭代此功能(即将在 Nuxt 3发布),而且可能会在 3.1 中到达稳定。
下一步
发布后的短时间内,开发团队将专一于:
版本迁移
支持 IE11
新 devtools 中的路由和 Vuex 集成
对 Vetur 中模板类型推导的进一步改进
目前,Vue 3 和 v3-targeting 项目的文档网站、GitHub 分支和 npm dist 标签将保持 next-denoted 状态。这意味着使用npm install vue
命令仍会安装 Vue 2.x,而要安装 Vue 3 需使用npm install vue@next
命令。官方计划在 2020 年末前将全部的 doc 连接、分支和 dist 标签都切换为默认 3.0。
同时,团队已开始启动 2.7 的开发工做计划,这将是 2.x 的最后一个次要版本。2.7 将向后移植来自 v3 的兼容改进,并会提示有关 v3 中已删除/更改的 API 使用状况的警告。团队表示计划在 2021 年第一季度开发 2.7,发布后将直接变为 LTS 版本,具备 18 个月的维护周期。
推荐阅读:
VS Code · 编程开发 · 业界资讯
本文分享自微信公众号 - 玩转VS Code(vs_code)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。