首个 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 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。