Element Plus 和 Ant Design Vue 对比测评，哪个更好？

Element Plus 和 Ant Design Vue 对比测评，哪个更好？

本文首发：《Element Plus 和 Ant Design Vue 对比测评，哪个更好？》

Vue 3 发布后，各家第三方库开始陆续重构并支持 Vue 3 ，国内两大知名框架 Element Plus 和 Ant Design Vue 也相续发布新版支持 Vue 3。到底应该怎么选择呢？本文从多个纬度对两个框架进行对比和测评。

element-plus-vs-ant-design-vue

Element Plus 发布正式版后，下载量飙升，当然这也依托于 Element UI 的占有率和好口碑。有关 Element Plus 的入门教程可看这篇：《Element Plus for Vue 3 入门教程》

框架版本对 Vue 的支持

• Element UI 支持 Vue 2
• Element Plus 支持 Vue 3
• Ant Design Vue 1.x 支持 Vue 2
• Ant Design Vue 3.x 支持 Vue 3

Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级，对于第三方组件库来说是一件好事，那些已经修修补补无数次，还无法彻底解决的问题，在这次面向 Vue 3.0 重构时，一次性全部解决。

Ant Design Vue 1.x 仅支持 Vue 2 ，2.x 是为了 Vue 3 开发的兼容版，并没有任何新特性，大多数的 API 也只是为了更好的兼容 Vue 3 ，3.x 版在易用性、功能、性能上都有了很大的提升，可以说是对 Vue 3 比较成熟支持的版本了。

浏览器兼容性

Element Plus 和 Ant Design Vue 3 都已不在支持 IE 了，并不是他们自己放弃了 IE 而是 Vue 3 本身已经放弃了 IE。如果想在低版本浏览器上正常使用这两个框架，可使用 Babel、ESBuild 或其他转换工具，并引入相应的 polyfill。

Element Plus 使用到了 ResizeObserver，如有兼容性需求可自行引入 resize-observer-polyfill。详情请参阅 ResizeObserver 的兼容性。

组件功能与特点

Element Plus 共 68 个组件，Ant Design Vue 3.x 共 64 个组件。

• table 组件：Element Plus 自带 virtual scroll ，Ant Design Vue 需要购买 Surely 这个高级包。如果需要用表格处理大量数据，Element Plus 更合适。Ant Design table ，定义好 columns 有几列后，用 template 写法就无法用 v-if 去隐藏某一列
• 在 Ant Design Vue 里，Modal.confirm 某些 api 不支持 promise 写法，需要写在回调函数里
• TreeSelect 组件：Ant Design tree 组件写自定义内容不方便。而 Element 更好用。
• form 表单组件：两个框架功能基本一致，包含数据收集，表单校验和提交功能。input、checkbox 、select 等常用功能两个框架都有。
• Ant Design Vue 2 & 3 是最早支持 Vue 3 的框架之一，新版本解决了很多 Vue 用户群在旧版本不喜欢的「单向数据流 value + change event」，实现了全 v-model 使用组件。

维护状态

Element Plus 与 Element UI 一样依然是饿了么团队开发支持和维护。前段时间传闻 Element UI 无人维护，不更新了。其实只是团队在全力开发 Element Plus 而已。Element 团队的迭代速度有目共睹，可放心使用。

Ant Design Vue 是 Ant Design的 Vue 实现，UI 风格和 Ant Design 保持 1:1 复刻。Ant Design Vue 虽然是以个人开发开始起步的，算是社区版，但它得到了蚂蚁官方认可，挂在蚂蚁金服底下的正式项目，保持了不错的更新和维护状态。