首個 Vue 3 組件庫發布

聯合 vuejs member、antd member、社區大佬，共同打造
阿里巴巴、螞蟻金服傾力支持
nuxtjs 官方示例組件庫
萬星 Github 項目，歡迎 Star
沒錯，就是 Ant Design Vue 2.0

支持 Vite & TypeScript，開發體驗比德芙還要絲滑

不對 Vite 做過多評價和解析了，總之這玩意真的有點吊，絲滑的程度不是抹點油就能達到的級別，研發提效nn%不是夢。

更加易用

一直被吐槽，很少做改變，不得不說，我們一直站在自己的角度去思考，去設計 API，總認為我們提供的就是最好的。

在重構 2.0 的時候，我們深刻的反思這個問題，我們期望給大家帶來更加易用的組件庫，將組件庫當作一個真正的產品去打磨，而不是去秀技術。降低心智成本，快速開發項目，將作為接下來產品打磨的主要原則。同樣對於文檔使用手冊也將作為接下來的主要發力點，目前已經做了一部分的優化。

你不用再考慮 defaultValue、value 的區別；

也不用在去學習 v-decorator 是個啥；

也不用去學習 JSX；

......

破壞性更新

很遺憾的是，在更加易用的同時，2.0 會有少許破壞性更新，一個原因是歷史包袱問題，另一個原因是 Vue3 的改動調整。

歷史包袱：

1、1.x 版本的作用域插槽參數是支持多參數的，因為在模板語法中是無法支持多參數的，Vue 最開始也並沒有想到會有多參數的場景，因為組件庫的底層是使用的render函數，是可以使用多參數的，所以在1.x版本就支持了多參數，但是對於模版開發中，多參數就會變得不是很友好。

2、1.x 版本的一共提供了兩個表單組件(Form、FormModel)，對於 Form 我們參考了 React 版本的表單實現方式，是通過上下文進行強制刷新，在 Vue 3 中如果還是這種方式，將無法享受到 patchFlag 帶來的性能優化，而且它也帶來了一定的心智成本，所以在 2.0 中，我們將 Form、FormModel 進行了合並，將 Form 強大的功能，和 FormModel 易用的特征結合，形成了新版的 Form。

Vue 3 的改動：

1、雙向綁定 v-model 和 .sync 合並

2、組件參數扁平化，如 { props: {type: 'xxx'}, on: {click: this.handleClick}} 改成 { type: 'xxx', onClick: this.handleClick } 這個涉及組件並不多，改動成本並不大，詳細可見下方說明。

2.0 主要變化

設計規范調整

行高從 1.5(21px) 調整為 1.5715(22px)。
基礎圓角調整，由4px 改為 2px。
分割線顏色明度降低，由 #E8E8E8 改為 #F0F0F0。
Table 默認背景顏色從透明修改為白色。

兼容性調整

IE 最低支持版本為 IE 11。
Vue 最低支持版本為 Vue 3.0。

調整的 API

移除了 LocaleProvider，請使用 ConfigProvider 替代。
移除了 Tag 的 afterClose 屬性。
合並了 FormModel、Form，詳見下方的 Form 重構部分。
tabIndex、maxLength、readOnly、autoComplete、autoFocus 更改為全小寫。
為了在 template 語法中更友好的使用插槽，所有涉及到 xxxRender, renderXxxx 的均改成單參數，涉及到 itemRender、renderItem、customRender、dropdownRender、dateCellRender、dateFullCellRender、monthCellRender、monthFullCellRender、renderTabBar。
所有配置 scopedSlots 的地方統一改成 slots。
{ on, props, attrs, ... } 配置進行扁平化處理，如 { props: {type: 'xxx'}, on: {click: this.handleClick}} 改成 { type: 'xxx', onClick: this.handleClick }, 涉及相關字段：okButtonProps、cancelButtonProps。
xxx.sync 改成 v-model:xxx
v-model 更改成 v-model:xxx，具體涉及組件：
- v-model 改成 v-model:checked 的組件有: CheckableTag、Checkbox、Switch
- v-model 改成 v-model:value 的組件有: Radio、Mentions、CheckboxGroup、Rate、DatePicker
- v-model 改成 v-model:visible 的組件有: Tag、Popconfirm、Popove、Tooltip、Moda、Dropdown
- v-model 改成 v-model:activeKey 的組件有: Collaps、Tabs
- v-model 改成 v-model:current 的組件有: Steps
- v-model 改成 v-model:selectedKeys 的組件有: Menu

圖標升級

在 ant-design-vue@1.2.0 中，我們引入了 svg 圖標（為何使用 svg 圖標？）。使用了字符串命名的圖標 API 無法做到按需加載，因而全量引入了 svg 圖標文件，這大大增加了打包產物的尺寸。在 2.0 中，我們調整了圖標的使用 API 從而支持 tree shaking，減少默認包體積約 150 KB(Gzipped)。

舊版 Icon 使用方式將被廢棄：

<a-icon type="smile" /> <a-button icon="smile" /> 復制代碼

2.0 中會采用按需引入的方式：

<template> <smile-outlined /> <a-button> <template v-slot:icon><smile-outlined /></template> </a-button> </template> <script> import SmileOutlined from '@ant-design/icons/SmileOutlined'; export default { components: { SmileOutlined } } </script> 復制代碼

組件重構

在 1.x 中我們提供了 Form、FormModel 兩個表單組件，原有的 Form 組件使用 v-decorator 進行數據綁定，在 Vue2 中我們通過上下文進行強制更新組件，但是在 Vue3 中，由於引入 patchFlag 等優化方式，強制刷新會破壞 patchFlag 帶來的性能優勢。所以在 2.0 版本中我們將 Form、FormModel 進行合並，保留了 FormModel 的使用方式，豐富了相關功能，並改名成 Form。

涉及改動：

Form 新增 scrollToFirstError,name,validateTrigger 屬性，新增 finish、finishFailed 事件，新增 scrollToField 方法。
Form.Item 新增 validateFirst, validateTrigger, 廢棄 prop 屬性，使用 name 替換。
嵌套字段路徑使用數組，過去版本我們通過 . 代表嵌套路徑（諸如 user.name 來代表 { user: { name: '' } }）。然而在一些后台系統中，變量名中也會帶上 .。這造成用戶需要額外的代碼進行轉化，因而新版中，嵌套路徑通過數組來表示以避免錯誤的處理行為（如 ['user', 'name']）。
validateFields 不再支持 callback。validateFields 會返回 Promise 對象，因而你可以通過 async/await 或者 then/catch 來執行對應的錯誤處理。不再需要判斷 errors 是否為空：

// v1 validateFields((err, value) => { if (!err) { // Do something with value } }); 復制代碼

改成

// v2 validateFields().then(values => { // Do something with value }); 復制代碼