基本信息
@arco-design/web-vue vs ant-design-vue vs element-plus vs naive-ui vs tdesign-vue | npm trends
逐个分析
element-plus
经典的element-ui继任者,持续迭代了多年,成熟度还是不错的,距离上次发版仅20天,维护频率还是不错的。但是由于历史原因,部分组件同时存在两个版本,这是比较少见的,并且UI设计也不够现代化了(可能是大家见多了,觉得没新鲜感,个人觉得还是比较经典的)。
issue 非常多,但相应的,close 的 issue 也多。
看看近期或典型 issue
这个是最近掘金热门,虽然原作者的测试方法我并不赞同,但是在仓库issue列表中搜索泄露,出现不少相关问题
又一个内存泄露的问题,我非常赞同维护者的观点,本质是devtools导致的泄露,如果实际开发中遇到内存涨的问题,还是需要多看看业务代码是否存在问题。
看看近一个月的动态
维护积极
ant-design-vue
react 版本的毫无疑问是社区中的王者,vue 版迭代了多年,口碑也挺好。但是近来维护积极了。仓库里issue非常少,但是这恰恰是其维护力度下降的原因,因为大量的issue是被机器人自动关闭的。上一次发版也在5个月前了。
看看近期或典型 issue
- SSR 模式下,图标第二次渲染会出现丢失 · Issue #6939 · vueComponent/ant-design-vue
- The tags of the tabs component support drag and drop functionality(tabs组件支持可拖拽功能) · Issue #8023 · vueComponent/ant-design-vue
- issue 大量过期关闭
库样式是用的css in js进行编写的。说实话,个人从一开始就不喜欢这种样式编写模式,有运行时,服务端渲染消耗大。css in js对AI也非常不友好,现在styled-component都进入维护模式了,果然tailwindcss才是未来啊,className是长了点,但是AI和开发者喜欢啊。
这个库还有个问题,table组件不够强大,如果业务需要虚拟滚动,不得不借助另外的table组件。这个库有商业化的表格库,看了下npm,似乎新版本的下载量也不好,商业化的路不好走。
看看近一个月的动态
没有合并新内容,看了下关闭的issues,绝大多数是机器人自动关闭的,怀疑处于半弃坑状态。
naive-ui
这个库在vue3发布初期是很火的,得到了尤雨溪推荐,样式的编写也是css in js,运行时组件层面有大量的css变量嵌入(且很多无用注入),在可以通过禁用内联样式优化。SSR性能不好,部分组件SSR上存在问题。
组件样式还是不错的,比较清新,个人比较喜欢。
看看近期或典型 issue
-
[Cascader] 存在value相同的子节点时,总会拿到错误的层级 · Issue #6778 · tusen-ai/naive-ui 响应还是比较快的
-
能否支持slot的类型? · Issue #6599 · tusen-ai/naive-ui 这个很不错,跟进了 vue 的进化,支持新特性
看看近一个月的动态
没有什么维护,情况还是比 ant-design-vue 好一点。
@arco-design/web-vue
这个没怎么关注,字节毕竟是以 react 为主的,vue 生态的维护或许会逐渐落后。不过值得一提的是,好多 vue 的大佬被字节挖过去搞 react 了,vue 的墙角被挖麻了。
看看近期或典型 issue
- 希望添加 国际化支持 荷兰语 · Issue #3394 · arco-design/arco-design-vue
- 文档中快速上手arco init hello-arco-pro 不行了么,没人解决么 · Issue #3458 · arco-design/arco-design-vue
看看近一个月的动态
维护频率一般
tdesign-vue-next
tdesign 是今年我个人比较关注的,主要是它的生态做得很大。
各个端,各种技术栈都有。如果要做多个端的视觉统一,不自己设计,毫无疑问,tdesign 是最适合的了。
看看近期或典型 issue
- [Tabs] Placement And Action API Conflicts · Issue #4934 · Tencent/tdesign-vue-next 似乎从这个库扩展到了 design 层面,是否是所有的周边库都会得到更新呢?总是看起来很厉害的样子
- [treeselect]树选择选择节点默认会触发动态加载事件,expandOnClickNode不是默认为false么 · Issue #2431 · Tencent/tdesign-vue-next 流程看起来就很正规😂
看看近一个月的动态
维护积极,且腾讯自身是有很多业务用到 vue 的,个人比较看好这个库。
摘要
- element-plus:作为 element-ui 的继任者,成熟度高,社区维护积极,近期更新频繁。缺点是 UI 风格相对传统,存在大量 issue(虽关闭也多),并有内存泄漏的相关讨论(尽管部分可能与 devtools 相关)。
- ant-design-vue:口碑尚可,但近期维护显著放缓,上次发版在5个月前,大量 issue 被机器人自动关闭,疑似半弃坑状态。采用 css-in-js 方案(不喜欢),Table 组件功能相对较弱。
- naive-ui:Vue 3 初期很受欢迎,UI 风格清新。缺点是采用 css-in-js 导致 SSR 性能问题,近期维护也较少。
- @arco-design/web-vue:字节跳动出品,但因公司技术栈以 React 为主,Vue 生态的维护前景可能受影响。维护频率一般。
- tdesign-vue-next:腾讯出品,生态完善(覆盖多技术栈、多端),维护非常积极,由企业维护且内部有业务使用,流程规范,看好。
结论
综合来看,目前推荐优先考虑 element-plus 和 tdesign-vue-next。
- element-plus 胜在成熟度高、社区生态繁荣、维护积极。
- tdesign-vue-next 优势在于企业级维护带来的稳定性、积极的更新频率以及强大的跨端、跨技术栈生态潜力。