2025 Vue UI 组件库选型

3,764 阅读5分钟

基本信息

image.png

@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列表中搜索泄露,出现不少相关问题

image.png

又一个内存泄露的问题,我非常赞同维护者的观点,本质是devtools导致的泄露,如果实际开发中遇到内存涨的问题,还是需要多看看业务代码是否存在问题。

看看近一个月的动态

image.png

维护积极

ant-design-vue

react 版本的毫无疑问是社区中的王者,vue 版迭代了多年,口碑也挺好。但是近来维护积极了。仓库里issue非常少,但是这恰恰是其维护力度下降的原因,因为大量的issue是被机器人自动关闭的。上一次发版也在5个月前了。

看看近期或典型 issue

库样式是用的css in js进行编写的。说实话,个人从一开始就不喜欢这种样式编写模式,有运行时,服务端渲染消耗大。css in js对AI也非常不友好,现在styled-component都进入维护模式了,果然tailwindcss才是未来啊,className是长了点,但是AI和开发者喜欢啊。

这个库还有个问题,table组件不够强大,如果业务需要虚拟滚动,不得不借助另外的table组件。这个库有商业化的表格库,看了下npm,似乎新版本的下载量也不好,商业化的路不好走。

看看近一个月的动态

image.png

没有合并新内容,看了下关闭的issues,绝大多数是机器人自动关闭的,怀疑处于半弃坑状态。

naive-ui

这个库在vue3发布初期是很火的,得到了尤雨溪推荐,样式的编写也是css in js,运行时组件层面有大量的css变量嵌入(且很多无用注入),在可以通过禁用内联样式优化。SSR性能不好,部分组件SSR上存在问题。

组件样式还是不错的,比较清新,个人比较喜欢。

看看近期或典型 issue

看看近一个月的动态

image.png

没有什么维护,情况还是比 ant-design-vue 好一点。

@arco-design/web-vue

这个没怎么关注,字节毕竟是以 react 为主的,vue 生态的维护或许会逐渐落后。不过值得一提的是,好多 vue 的大佬被字节挖过去搞 react 了,vue 的墙角被挖麻了。

看看近期或典型 issue

看看近一个月的动态

image.png

维护频率一般

tdesign-vue-next

tdesign 是今年我个人比较关注的,主要是它的生态做得很大。

image.png

各个端,各种技术栈都有。如果要做多个端的视觉统一,不自己设计,毫无疑问,tdesign 是最适合的了。

看看近期或典型 issue

看看近一个月的动态

image.png

维护积极,且腾讯自身是有很多业务用到 vue 的,个人比较看好这个库。

摘要

  1. element-plus:作为 element-ui 的继任者,成熟度高,社区维护积极,近期更新频繁。缺点是 UI 风格相对传统,存在大量 issue(虽关闭也多),并有内存泄漏的相关讨论(尽管部分可能与 devtools 相关)。
  2. ant-design-vue:口碑尚可,但近期维护显著放缓,上次发版在5个月前,大量 issue 被机器人自动关闭,疑似半弃坑状态。采用 css-in-js 方案(不喜欢),Table 组件功能相对较弱。
  3. naive-ui:Vue 3 初期很受欢迎,UI 风格清新。缺点是采用 css-in-js 导致 SSR 性能问题,近期维护也较少。
  4. @arco-design/web-vue:字节跳动出品,但因公司技术栈以 React 为主,Vue 生态的维护前景可能受影响。维护频率一般。
  5. tdesign-vue-next:腾讯出品,生态完善(覆盖多技术栈、多端),维护非常积极,由企业维护且内部有业务使用,流程规范,看好。

结论

综合来看,目前推荐优先考虑 element-plus 和 tdesign-vue-next

  • element-plus 胜在成熟度高、社区生态繁荣、维护积极。
  • tdesign-vue-next 优势在于企业级维护带来的稳定性、积极的更新频率以及强大的跨端、跨技术栈生态潜力。