強(qiáng)大陣容和背景
- 聯(lián)合 vuejs member震鹉、antd member吩抓、社區(qū)大佬群井，共同打造
- 阿里巴巴玛痊、螞蟻金服傾力支持
- nuxtjs 官方示例組件庫(kù)
- 萬(wàn)星 Github 項(xiàng)目汰瘫，歡迎 Star
- 沒錯(cuò)，就是 Ant Design Vue 2.0
支持 Vite & TypeScript擂煞，開發(fā)體驗(yàn)比德芙還要絲滑
不對(duì) Vite 做過(guò)多評(píng)價(jià)和解析了混弥，總之這玩意真的有點(diǎn)吊，絲滑的程度不是抹點(diǎn)油就能達(dá)到的級(jí)別对省，研發(fā)提效nn%不是夢(mèng)蝗拿。
更加易用
一直被吐槽，很少做改變蒿涎，不得不說(shuō)哀托，我們一直站在自己的角度去思考，去設(shè)計(jì) API劳秋，總認(rèn)為我們提供的就是最好的仓手。
在重構(gòu) 2.0 的時(shí)候，我們深刻的反思這個(gè)問(wèn)題玻淑，我們期望給大家?guī)?lái)更加易用的組件庫(kù)嗽冒，將組件庫(kù)當(dāng)作一個(gè)真正的產(chǎn)品去打磨，而不是去秀技術(shù)岁忘。降低心智成本辛慰，快速開發(fā)項(xiàng)目，將作為接下來(lái)產(chǎn)品打磨的主要原則干像。
同樣對(duì)于文檔使用手冊(cè)也將作為接下來(lái)的主要發(fā)力點(diǎn)帅腌，目前已經(jīng)做了一部分的優(yōu)化。
你不用再考慮 defaultValue麻汰、value 的區(qū)別速客；
也不用在去學(xué)習(xí) v-decorator 是個(gè)啥；
也不用去學(xué)習(xí) JSX五鲫；
......
破壞性更新
很遺憾的是溺职，在更加易用的同時(shí)，2.0 會(huì)有少許破壞性更新，一個(gè)原因是歷史包袱問(wèn)題浪耘，另一個(gè)原因是 Vue3 的改動(dòng)調(diào)整乱灵。
歷史包袱：
1、1.x 版本的作用域插槽參數(shù)是支持多參數(shù)的七冲，因?yàn)樵谀０逭Z(yǔ)法中是無(wú)法支持多參數(shù)的痛倚，Vue 最開始也并沒有想到會(huì)有多參數(shù)的場(chǎng)景，因?yàn)榻M件庫(kù)的底層是使用的render函數(shù)澜躺，是可以使用多參數(shù)的蝉稳，所以在1.x版本就支持了多參數(shù)，但是對(duì)于模版開發(fā)中掘鄙，多參數(shù)就會(huì)變得不是很友好耘戚。
2、1.x 版本的一共提供了兩個(gè)表單組件(Form操漠、FormModel)收津，對(duì)于 Form 我們參考了 React 版本的表單實(shí)現(xiàn)方式，是通過(guò)上下文進(jìn)行強(qiáng)制刷新颅夺，在 Vue 3 中如果還是這種方式朋截，將無(wú)法享受到 patchFlag 帶來(lái)的性能優(yōu)化，而且它也帶來(lái)了一定的心智成本吧黄，所以在 2.0 中部服，我們將 Form、FormModel 進(jìn)行了合并拗慨，將 Form 強(qiáng)大的功能廓八，和 FormModel 易用的特征結(jié)合，形成了新版的 Form赵抢。
Vue 3 的改動(dòng)：
1剧蹂、雙向綁定 v-model 和 .sync 合并
2、組件參數(shù)扁平化烦却，如 { props: {type: 'xxx'}, on: {click: this.handleClick}} 改成 { type: 'xxx', onClick: this.handleClick } 這個(gè)涉及組件并不多宠叼，改動(dòng)成本并不大，詳細(xì)可見下方說(shuō)明其爵。
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，請(qǐng)使用 ConfigProvider 替代枉侧。
- 移除了 Tag 的 afterClose 屬性引瀑。
- 合并了 FormModel、Form榨馁，詳見下方的 Form 重構(gòu)部分伤疙。
- tabIndex、maxLength辆影、readOnly、autoComplete黍特、autoFocus 更改為全小寫蛙讥。
- 為了在 template 語(yǔ)法中更友好的使用插槽，所有涉及到 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)升級(jí)
在 ant-design-vue@1.2.0 中，我們引入了 svg 圖標(biāo)（為何使用 svg 圖標(biāo)扒袖？）塞茅。使用了字符串命名的圖標(biāo) API 無(wú)法做到按需加載，因而全量引入了 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 中會(huì)采用按需引入的方式：
<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 中我們通過(guò)上下文進(jìn)行強(qiáng)制更新組件，但是在 Vue3 中史辙，由于引入 patchFlag 等優(yōu)化方式汹买，強(qiáng)制刷新會(huì)破壞 patchFlag 帶來(lái)的性能優(yōu)勢(shì)。所以在 2.0 版本中我們將 Form聊倔、FormModel 進(jìn)行合并晦毙，保留了 FormModel 的使用方式，豐富了相關(guān)功能耙蔑，并改名成 Form见妒。
涉及改動(dòng)：
- Form 新增 scrollToFirstError,name,validateTrigger 屬性，新增 finish甸陌、finishFailed 事件徐鹤，新增 scrollToField 方法。
- Form.Item 新增 validateFirst, validateTrigger, 廢棄 prop 屬性邀层，使用 name 替換返敬。
- 嵌套字段路徑使用數(shù)組，過(guò)去版本我們通過(guò) . 代表嵌套路徑（諸如 user.name 來(lái)代表 { user: { name: '' } }）寥院。然而在一些后臺(tái)系統(tǒng)中劲赠，變量名中也會(huì)帶上 .。這造成用戶需要額外的代碼進(jìn)行轉(zhuǎn)化秸谢，因而新版中凛澎，嵌套路徑通過(guò)數(shù)組來(lái)表示以避免錯(cuò)誤的處理行為（如 ['user', 'name']）。
- validateFields 不再支持 callback估蹄。validateFields 會(huì)返回 Promise 對(duì)象塑煎，因而你可以通過(guò) async/await 或者 then/catch 來(lái)執(zhí)行對(duì)應(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)作的動(dòng)力冷尉。
-
掃碼關(guān)注公眾號(hào)加入交流群漱挎，大家一起共同交流和進(jìn)步。
微信公眾號(hào)：晨曦大前端
前端交流群：954854084
作者：zeka 著作權(quán)歸作者所有雀哨。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)磕谅，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
