Vant 3.0 正式發佈：全面擁抱 Vue 3

Vant 是有贊前端團隊開源的一套輕量、可靠的移動端組件庫。

歷經八個月時長的開發，Vant 3.0 終於和你們正式見面咯。在本次迭代中，咱們的主要工做是基於 Vue 3 重構整個代碼倉庫和周邊生態，併發布 Vant 3.0、Vant Cli 3.0 和 Vant Use 1.0。

回顧

按照慣例，咱們先簡單回顧一下 Vant 開源至今的成績：

• 270 位開發者 參與了 Vant 和 VantWeapp 開發，並貢獻了 4100 個 Pull Request
• 7300 個 issue 被關閉，99.3% 的 issue 獲得解決或答覆
• 站點月訪問量 800 萬次
• CDN 月下載量 3 億次

更新內容

Vant 3.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 二、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 三、VueRouter 四、VueLoader 16
• 升級 Webpack 5，開啓持久緩存能力
• 升級 Docsearch 3，全新的搜索框樣式
• 升級 TypeScript 四、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 上。

另外，除了官方維護的 Vue 版本和微信小程序版本，Vant 也有由社區的小夥伴們發起和維護的 React 版本和支付寶小程序版本，歡迎你們一塊兒參與建設 💪

不平凡的 2020 年即將過去，但願 Vant 能給你們的工做帶來一點點的幫助，咱們明年再會。