強(qiáng)大陣容和背景
- 聯(lián)合 vuejs member、antd member、社區(qū)大佬，共同打造
- 阿里巴巴、螞蟻金服傾力支持
- nuxtjs 官方示例組件庫
- 萬星 Github 項(xiàng)目，歡迎 Star
- 沒錯(cuò)，就是 Ant Design Vue 2.0
支持 Vite & TypeScript，開發(fā)體驗(yàn)比德芙還要絲滑
不對 Vite 做過多評價(jià)和解析了，總之這玩意真的有點(diǎn)吊，絲滑的程度不是抹點(diǎn)油就能達(dá)到的級別，研發(fā)提效nn%不是夢。
更加易用
一直被吐槽，很少做改變，不得不說，我們一直站在自己的角度去思考，去設(shè)計(jì) API，總認(rèn)為我們提供的就是最好的。
在重構(gòu) 2.0 的時(shí)候，我們深刻的反思這個(gè)問題，我們期望給大家?guī)砀右子玫慕M件庫，將組件庫當(dāng)作一個(gè)真正的產(chǎn)品去打磨，而不是去秀技術(shù)。降低心智成本，快速開發(fā)項(xiàng)目，將作為接下來產(chǎn)品打磨的主要原則。
同樣對于文檔使用手冊也將作為接下來的主要發(fā)力點(diǎn)，目前已經(jīng)做了一部分的優(yōu)化。
你不用再考慮 defaultValue、value 的區(qū)別；
也不用在去學(xué)習(xí) v-decorator 是個(gè)啥；
也不用去學(xué)習(xí) JSX；
......
破壞性更新
很遺憾的是，在更加易用的同時(shí)，2.0 會有少許破壞性更新，一個(gè)原因是歷史包袱問題，另一個(gè)原因是 Vue3 的改動調(diào)整。
歷史包袱：
1、1.x 版本的作用域插槽參數(shù)是支持多參數(shù)的，因?yàn)樵谀０逭Z法中是無法支持多參數(shù)的，Vue 最開始也并沒有想到會有多參數(shù)的場景，因?yàn)榻M件庫的底層是使用的render函數(shù)，是可以使用多參數(shù)的，所以在1.x版本就支持了多參數(shù)，但是對于模版開發(fā)中，多參數(shù)就會變得不是很友好。
2、1.x 版本的一共提供了兩個(gè)表單組件(Form、FormModel)，對于 Form 我們參考了 React 版本的表單實(shí)現(xiàn)方式，是通過上下文進(jìn)行強(qiáng)制刷新，在 Vue 3 中如果還是這種方式，將無法享受到 patchFlag 帶來的性能優(yōu)化，而且它也帶來了一定的心智成本，所以在 2.0 中，我們將 Form、FormModel 進(jìn)行了合并，將 Form 強(qiáng)大的功能，和 FormModel 易用的特征結(jié)合，形成了新版的 Form。
Vue 3 的改動：
1、雙向綁定 v-model 和 .sync 合并
2、組件參數(shù)扁平化，如 { props: {type: 'xxx'}, on: {click: this.handleClick}} 改成 { type: 'xxx', onClick: this.handleClick } 這個(gè)涉及組件并不多，改動成本并不大，詳細(xì)可見下方說明。
2.0 主要變化
設(shè)計(jì)規(guī)范調(diào)整
- 行高從 1.5(21px) 調(diào)整為 1.5715(22px)。
- 基礎(chǔ)圓角調(diào)整，由4px 改為 2px。
- 分割線顏色明度降低，由 #E8E8E8 改為 #F0F0F0。
- Table 默認(rèn)背景顏色從透明修改為白色。
兼容性調(diào)整
- IE 最低支持版本為 IE 11。
- Vue 最低支持版本為 Vue 3.0。
調(diào)整的 API
- 移除了 LocaleProvider，請使用 ConfigProvider 替代。
- 移除了 Tag 的 afterClose 屬性。
- 合并了 FormModel、Form，詳見下方的 Form 重構(gòu)部分。
- tabIndex、maxLength、readOnly、autoComplete、autoFocus 更改為全小寫。
- 為了在 template 語法中更友好的使用插槽，所有涉及到 xxxRender, renderXxxx 的均改成單參數(shù)，涉及到 itemRender、renderItem、customRender、dropdownRender、dateCellRender、dateFullCellRender、monthCellRender、monthFullCellRender、renderTabBar。
- 所有配置 scopedSlots 的地方統(tǒng)一改成 slots。
- { on, props, attrs, ... } 配置進(jìn)行扁平化處理，如 { props: {type: 'xxx'}, on: {click: this.handleClick}} 改成 { type: 'xxx', onClick: this.handleClick }, 涉及相關(guān)字段：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
圖標(biāo)升級
在 ant-design-vue@1.2.0 中，我們引入了 svg 圖標(biāo)（為何使用 svg 圖標(biāo)？）。使用了字符串命名的圖標(biāo) API 無法做到按需加載，因而全量引入了 svg 圖標(biāo)文件，這大大增加了打包產(chǎn)物的尺寸。在 2.0 中，我們調(diào)整了圖標(biāo)的使用 API 從而支持 tree shaking，減少默認(rèn)包體積約 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>
組件重構(gòu)
在 1.x 中我們提供了 Form、FormModel 兩個(gè)表單組件，原有的 Form 組件使用 v-decorator 進(jìn)行數(shù)據(jù)綁定，在 Vue2 中我們通過上下文進(jìn)行強(qiáng)制更新組件，但是在 Vue3 中，由于引入 patchFlag 等優(yōu)化方式，強(qiáng)制刷新會破壞 patchFlag 帶來的性能優(yōu)勢。所以在 2.0 版本中我們將 Form、FormModel 進(jìn)行合并，保留了 FormModel 的使用方式，豐富了相關(guān)功能，并改名成 Form。
涉及改動：
- Form 新增 scrollToFirstError,name,validateTrigger 屬性，新增 finish、finishFailed 事件，新增 scrollToField 方法。
- Form.Item 新增 validateFirst, validateTrigger, 廢棄 prop 屬性，使用 name 替換。
- 嵌套字段路徑使用數(shù)組，過去版本我們通過 . 代表嵌套路徑（諸如 user.name 來代表 { user: { name: '' } }）。然而在一些后臺系統(tǒng)中，變量名中也會帶上 .。這造成用戶需要額外的代碼進(jìn)行轉(zhuǎn)化，因而新版中，嵌套路徑通過數(shù)組來表示以避免錯(cuò)誤的處理行為（如 ['user', 'name']）。
- validateFields 不再支持 callback。validateFields 會返回 Promise 對象，因而你可以通過 async/await 或者 then/catch 來執(zhí)行對應(yīng)的錯(cuò)誤處理。不再需要判斷 errors 是否為空：
// v1
validateFields((err, value) => {
if (!err) {
// Do something with value
}
});
改成
// v2
validateFields().then(values => {
// Do something with value
});
最后
- 文章若有不足或有更好建議，歡迎提出，大家一起討論~
- 如果喜歡本文，就點(diǎn)個(gè)贊支持下吧，你的「贊」是我創(chuàng)作的動力。
-
掃碼關(guān)注公眾號加入交流群，大家一起共同交流和進(jìn)步。
微信公眾號：晨曦大前端
前端交流群：954854084
作者：zeka 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
