首个 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
});

最后

文章若有不足或有更好建议，欢迎提出，大家一起讨论~
如果喜欢本文，就点个赞支持下吧，你的「赞」是我创作的动力。
扫码关注公众号加入交流群，大家一起共同交流和进步。

微信公众号：晨曦大前端

前端交流群：954854084

作者：zeka 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。