Vant 3.0 正式发布:全面拥抱 Vue 3

偷懒的程序员 2020-12-24 14:57:55 ⋅ 185 阅读

历经八个月时长的开发,Vant 3.0 现已正式发布。官方表示,在本次迭代中,其主要工作是基于 Vue 3 重构整个代码仓库和周边生态,并发布 Vant 3.0、Vant Cli 3.0 和 Vant Use 1.0。 具体更新内容如下:

全面拥抱 Vue 3

Vue 3 带来了许多新特性,比如 Composition API、emits Option 和 Teleport。Vant 3.0 全面拥抱了 Vue 3 带来的各种变化,完成下列改造:

  • 使用 Composition API 重构所有组件

  • 使用 Composition API 重写所有文档和示例

  • 组件增加 emits 选项,提供更好的事件提示

  • 移除所有 mixins,提升代码可读性

  • 所有弹窗类组件支持 teleport 属性

重构完成后,组件之间可以基于 Composition API 进行逻辑复用,代码的可压缩性也有所提升。与 Vant 2.12 版本进行对比,可以看到 Vant 3.0 的 JS 体积下降了 16.6%,Gzip 后体积下降至 67.5kb。

新组件:Vant 2、Vant 3 同步供应

Vant 3.0 中包含 3 个全新的组件,分别是:

  • Badge 徽标:用于在右上角展示徽标数字或小红点。

  • Popover 气泡弹出框:弹出式的气泡菜单组件。

  • Cascader 级联选择器:用于多层级数据的选择,典型场景为省市区选择。

考虑到大部分开发者仍然在使用 Vue 2 进行开发,开发团队在 Vant 2 中同步实现了以上三个组件,用户可以升级到 Vant 2.12 版本进行使用。

Vant Use:新伙伴

Vant Use 从 Vant 中沉淀出的 Composition API 库。除了提供常用的 Composition API 外,Vant Use 也会将某些组件的逻辑抽离出来,让开发者在使用组件逻辑的同时,能够完全自定义组件的展现形式。

示例如下:将 CountDown 组件的倒计时逻辑抽象为 useCountDown 方法,功能与 CountDown 组件基本等价,但使用起来更加灵活,可以自定义倒计时的 UI 样式,或者通过 computed 对倒计时进行预处理。

目前,Vant Use 仍然处于早期阶段。官方表示,在未来的演进过程中,其会继续抽离 Vant 组件内部的通用逻辑,并下沉到 Vant Use 中。

Vant Cli 3.0:更新,更快 

Vant Cli 是 Vant 底层的组件库构建工具,通过 Vant Cli 可以快速搭建一套功能完备的 Vue 组件库。Vant Cli 3.0 对所有底层依赖进行了大版本升级,在支持 Vue 3 的同时,提供更流畅的开发体验。

  • 升级 Vue 3、VueRouter 4、VueLoader 16

  • 升级 Webpack 5,开启持久缓存能力

  • 升级 Docsearch 3,全新的搜索框样式

  • 升级 TypeScript 4、ESLint 7

在创建 vant-cli 工程时,你可以自由选择基于 Vue 2 或者 Vue 3 进行组件库开发:

Vant Demo:2 个新的示例工程

Vant Demo 是 Vant 官方提供的示例工程合集,本次迭代中新增了 2 个示例工程,分别演示:

  • 如何使用 Vue 3 + Vant 3 + Vue Cli 搭建应用

  • 如何使用 Vue 3 + Vant 3 + Vite 搭建应用

已有部分用户开始使用 Vite 进行开发,但在使用 Vite 的过程中,关于如何在 Vite 中进行按需引入 Vant 组件的问题总是令人感到困惑。在 Vue Cli 中,可以通过 babel-plugin-import 插件实现按需引入,但在 Vite 中无法使用该插件。

官方表示,其实在 Vite 中无须考虑按需引入的问题。Vite 在构建代码时,会自动通过 Tree Shaking 移除未使用的 ESM 模块。而 Vant 3.0 内部所有模块都是基于 ESM 编写的,天然具备按需引入的能力。现阶段遗留的问题是,未使用的组件样式无法被 Tree Shaking 识别并移除,后续其会考虑通过 Vite 插件的方式进行支持。

升级

目前,Vant 官网默认展示 Vant 2 的 API 文档,用户可以通过官网右上角的版本切换按钮访问 Vant 3 的文档。

同时,Vant 的 npm latest 标签也保持在 v2 版本,这意味着使用 npm install vant 命令仍会安装 Vant 2,而安装 Vant 3 需要使用 npm install vant@next 命令。官方称,在 Vue 的默认文档版本和 npm 标签切换为 v3 后,他们也会同步进行切换。 从现有 Vant 2 项目升级,请参考升级指南

下一步计划

在未来 6 ~ 12 个月内,开发团队会保持 Vant 2 和 Vant 3 的功能同步更新。随着 Vue 3 的普及,他们将会逐步降低 Vant 2 的维护频率,并将工作重心转移到 Vant 3 上。


全部评论: 0

    我有话说:

    Vue 3 正式发布

    Vue.js 3.0 "One Piece" 已正式发布,此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API,并为框架未来的长期

    「尝鲜」SpringBoot 快速整合Swagger 3.0

    第一步:Maven引入Swagger3.0 starter依赖 Maven项目中引入springfox-boot-starter依赖: <dependency> <

    Vue CLI 3.0 正式发布Vue.js 开发标准化工具

    Vue CLI 3.0发布,该版本经历了重构了很多有用的内容

    Vuex 4 正式发布

    Vuex 4 已正式发布,此版本的更新重点是提供更好的兼容性。从 release note 可以看到,Vuex 4 不但支持 Vue 3,并且提供与 Vuex 3 完全相同的 API,因此用户可以在

    Element Plus 发布 Beta 版本,适配 Vue 3.0 的 Element

    Element 开发团队宣布推出 Element Plus 首个 Beta 版本,官方表示 Element Plus 是 Element 对 Vue 3.0 的升级适配。 地址:https

    ElasticJob 3.0.0-beta 发布,丰富的报警机制集成

    本周Apache ShardingSphere团队很高兴的向大家宣布: ElasticJob-3.0.0-beta 和 ElasticJob UI-3.0.0-beta 的新版本正式发布

    【老兵不朽】时隔1年,jQuery 发布 3.4.0 新版

    jQuery 团队的核心开发者 Timmy Willison 在官网正式宣布 jQuery 3.4.0发布

    SQLiteStudio 3.3.0 发布,时隔三年的更新

    在经过近 3 年的时间之后,SQLiteStudio 3.3.0 版本现已发布。SQLiteStudio 是一个跨平台的 SQLite 数据库的管理工具,采用 Tcl 语言开发

    Serverless Framework 2.3.0 发布

    Serverless 架构开发框架 Serverless Framework 发布了 2.3.0 版本,该框架使用 AWS Lambda、Azure Functions、Google

    Scala 3 来了,Dotty 发布 3.0.0-M1 版本

    Dotty 发布3.0 的首个里程碑版本 3.0.0-M1,Dotty 作为 Scala 尝试新的语言概念以及编译器技术的研究平台,它最终将成为 Scala 3.0。 Dotty 对

    前端框架 Angular 11.0.0 正式发布,不再支持 IE 9 、10

    前端框架 Angular 11.0.0 正式发布。 Angular 11.0.0 将 TypeScript 升级到 4.0, 对 TypeScript 3.9 不再支持。 放弃了对 IE 9 、10

    Fluid 0.3 正式发布:实现云原生场景通用化数据加速

    9 月份联合发起了开源项目 Fluid 。 Fl...

    OkHttps v3.0.0 发布,对 OkHttp3 轻量封装的框架

    OkHttps v3.0.0 已经发布,此版本更新内容包括: 1、项目分割,分离出 data 项目单独维护(JSON、XML 等结构化数据的统一抽象 API):https://gitee.com

    Apache Arrow 3.0.0 发布,内存数据交换格式

    Apache Arrow 3.0.0 发布了,该版本包含 2.0.0 发布以来修复的 678 个问题。Apache Arrow 是 Apache 基金会的顶级项目之一,目的是作为一个跨平台的数据层来

    Spring Framework 5.3.3 发布,初步支持 JDK 17

    Spring Framework 5.3.3 现已发布。Spring Framework 是一个分层应用程序框架,可在任何类型的部署平台上为基于 Java 的现代企业应用程序提供

    Python 3.9.2 和 3.8.8 现已发布

    Python 3.9.2 和 3.8.8 发布了。虽然在 3 天前才发过 RC 版本,但由于该版本包含两个安全性修复程序,在用户的敦促下,最终选择加急发布正式版。 接下来,将于 2021 年 5 月

    FileZilla Client 3.52.0 发布,FTP 客户端

    FileZilla Client 3.49.0-rc1 发布了。FileZilla 是一种快速、可信赖的 FTP 客户端以及服务器端开源程序,具有多种特色、直观的接口。FileZilla

    A3Mall v1.5.2 发布,免费开源的 PHP 小程序商城系统

    项目介绍 A3Mall商城系统是基于ThinkPhp6.0+Vue开发的一套移动电商系统, 支持微信公众号商城、H5商城、小程序商城,支持多种营销活动,优惠劵、订单活动、团购、秒杀、会员特价、积分