大前端开发

首个 Vue 3 组件库发布

2020-09-02  本文已影响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 主要变化


设计规范调整

兼容性调整

调整的 API

图标升级

在 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。

涉及改动:

// v1
validateFields((err, value) => {
  if (!err) {
    // Do something with value
  }
});

改成

// v2
validateFields().then(values => {
  // Do something with value
});

最后

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

上一篇 下一篇

猜你喜欢

热点阅读