有哪些组件库

  • element-plus
  • antd-vue
  • vuetify
  • naiveui

从哪些角度看？

  • 丰富度
    • 组件数量
    • 组件功能场景
  • 接口设计

  • UI设计
  • bug质量
  • 生态 维护
  • 易用性

element-plus和antd-vue 2.x对比

element-plus antd-vue
前提了解 element ui 在vue2.0时确实很强 在vue2.0时确实有点弱，在vue3.0时能力都上来了
组件数量 组件数量 表单组件
表单组件
- 有colorPicker，
- 有treeSelect，autoComplete，mentions，
数据展示
- 有Comment，List，Statistic，
组件功能场景
- menu，3个例子，其它所有组件案例基本都比antd-vue少，pageHeader，steps 等等


- icon，少，很多饿了吗相关吃的购物元素
- menu，大概7~8个例子


- icon比丰富很多，如table等中后台需要的icon
navMenu
- menu组件的非受控，defaultActive属性的不合理设计，defaultOpeneds只初始化使用
- 不方便获取其active值
- 可能引发bug
- 设计不一致，不易用
- menu的几个参数，统一支持使用 v-model 的受控模式，并清晰写出
- menu支持两种主题


-

| | table对比 |
- 列描述，纯template描述，不利于复用
- 自定义行class，点击事件 非常多事件来实现
- 清除filter都使用ref. 函数调用
- rowSelection都是通过函数控制的，如何设置默认选中项目
|
- 列，使用json描述，利于复用和代码生成
- 自定义筛选项，filterDropdown，更强的扩展能力
- 自定义class，点击事件，使用customRow来包装
- filter都是受控模式，
- 多选，rowSelection都是受控模式，表头还能添加更多的选择快捷选项(全选，反选等)
| | form对比 | |
- 单独提供有useForm在某些场景使用


- 对复杂类型的校验？如子对象，如数组类型等
| | tree对比 |
- 通过default设置默认值，以及refs.get获取和refs.set来设置组件，没有受控能力
- 检索能力，
|
- 使用v-model来受控的数据
| | 日历对比 | | | | 易用性 |
- 文档
-

| | | UI设计 |
- 只支持一种主题色


- 样式都有点大，如input的，如message


- 缺少设计系统的支持
|
- 主题色，支持暗黑主题和白色主题


- 公司，UI基本都是以antd这套设计的


- 有antd的设计语言支持
| | | | | | bug质量 | 底层的代码设计上，可能导致bug， | | | 生态 维护 | 和element2.0的团队人做对比，是一波人在做吗？确实是两拨人在做了

https://github.com/ElemeFE/element/graphs/contributors
https://github.com/element-plus/element-plus/graphs/contributors | https://github.com/vueComponent/ant-design-vue | | 使用量上 | github上的used by
npm trends

https://www.npmtrends.com/ant-design-vue-vs-element-plus-vs-element-ui | |

🎉 Element UI for Vue 3.0 来了！ - 知乎
🎉 Welcome to Element Plus · Issue #171 · element-plus/element-plus

3.0 for Easier to use · Issue #3922 · vueComponent/ant-design-vue 

  1. packages/menu/src/menu.vue
  3. // watch
  5. watch(
  6.       () => props.defaultActive,
  7.       currentActive => {
  8.         if (!items.value[currentActive]) {
  9.           activeIndex.value = ''
  10.         }
  11.         updateActiveIndex(currentActive)
  12.       },
  13. )

对比方法思考

  • 挖掘背后的原因，背后的人

element-ui当前这么强，element-plus各组件和代码上各种的问题，发现背后是不同的一批人在开发，原来的核心在plus上没提交多少代码

  • 必须对场景，对组件库比较深刻的认识。哪些是关键，好和坏。从几个关键组件突破。

如组件库，对受控和非受控的处理，非常关键，组件库的好坏。

从menu，tree，form，table等几个关键组件出发，发现了element-plus代码受控和非受控处理不好，menu中还有default会持续有用的设计bug

  • 需求的了解，通过文档学习了解需求

如icon需求，很多中后台的icon
如主题的需求，白色和暗黑主题
如table的各种场景，然后拿这些场景两方面对比

  • 想清楚对比的几个重要维度

如组件丰富度，场景的完整度，组件的受控非受控处理，

  • 可以去请求比较熟悉的人

前端方向太多了，h5，pc，小程序，不是所有的方向都了解，可以问比较熟悉的人

  • 使用过一些

在使用中才发现了menu的default写法问题

naiveui

如何评价 Naïve UI? - 知乎

明确的区分了受控和非受控，如table中，

vuetify

看了下貌似功能都么那么强大，如table部分，没有可展开的table，