首个 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
});
复制代码