首個 Vue 3 組件庫發佈

強大陣容和背景

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

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

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

更加易用

一直被吐槽，不多作改變，不得不說，咱們一直站在本身的角度去思考，去設計 API，總認爲咱們提供的就是最好的。html

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

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

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

也不用去學習 JSX；github

......api

破壞性更新

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

歷史包袱：性能優化

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

二、1.x 版本的一共提供了兩個表單組件(Form、FormModel)，對於 Form 咱們參考了 React 版本的表單實現方式，是經過上下文進行強制刷新，在 Vue 3 中若是仍是這種方式，將沒法享受到 patchFlag 帶來的性能優化，並且它也帶來了必定的心智成本，因此在 2.0 中，咱們將 Form、FormModel 進行了合併，將 Form 強大的功能，和 FormModel 易用的特徵結合，造成了新版的 Form。

Vue 3 的改動：

一、雙向綁定 v-model 和 .sync 合併

二、組件參數扁平化，如 { 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
});
複製代碼