我打造了一款，平民化的、高性能、高灵活的表单（vue 篇 — @usaform/element-plus）

该轮子是我对之前的原理篇的实践后的产物，如何打造一款，平民化的、高性能的，类表单体系（原理篇）^[1]，本文是阐述造轮子的背景

组件库不愿意解决的表单问题

表单风格体系是前端开发页面时最常见的功能之一，对于一般需求我们使用组件库自带的表单控件即可，但如果表单结合了以下两种情况，表单控件就会开始渐渐变得难用起来

深层次的嵌套管理
动态表单的性能

之所以会这样，是因为表单本身是一种在逻辑上高度耦合，但落地时又不得不拆成零零散散的形式使用，每多涵盖一种复杂的情况都会使得代码变得更加复杂，代码量增加，用户上手难度上升，用户使用限制变多

既然组件库缺少了这部分，我们又真的碰到了这种场景时，手写一套的难度是很高的，因为它太灵活了，不起眼的 bug 将会经常发生，所以我们可以选择已有的方案（npm包）来解决它

竞品对比

目前我所知道的，这方面做的最好的是 formilyjs，人家是当之无愧的王者级别解决方案，可是上手难度也是实实在在存在的

概念太多了
上手难度很高
Vue 相关的文档很薄弱
大问题没有，小问题不断（不实际用用你根本想不到有多少的那种），这是阿里系产品的通病，可能是赶 kpi 导致的吧

造轮子的缘由

做个竞品出来的过程，我想同为程序员应该都差不多吧

发现问题
搜索引擎/ai 找解决方案
能 cv 尽量 cv，能用现成就不想手写，能懒则懒
实在没法了就自己造个（或者唆使别人造个）

我的思考过程也类似，不硬着头皮用 formilyjs 是因为我发现如果深入使用的话，后果可能会难以把控，主要原因如下

团队接受度低。可以的话大家都不喜欢学新东西，尤其是只能应付较少场景，学习成本还高的技术。毕竟大多数表单都是静态的，cv 组件库改改数据即可解决
深入使用难度高。formilyjs 这个架子太大了，如果要自定义组件和深度使用的话，文档讲的远远不够，需要扒源码学习和排坑。文档呢有好几份，看之前得先看概念理论，然后在结合例子多用才能渐渐上手，为了一个表单这付出的成本略高了（on my gad 我不想学了）
扩展难度高。除了开箱即用和官网给现成的，还是得扒源码，否者就得靠经验根据例子进行推导和猜

在我研究了表单相关的解决方案后，造了个轮子 @usaform/element-plus，它适用于深层次嵌套和复杂的动态表单场景中，具备以下优点

高性能，只更新变更的部分
高灵活，尽量使用用户的组件，其本身只是粘合用的框架
优雅的互操作性，在表单任意地方都可以在保持高性能的同时，与其他字段进行交互

缺点

为了使用灵活，没有开箱即用的组件，具体逻辑全靠组件库填充，以及用户自己决定，就像是 vue 开箱即用了很多功能而 react 就不提供，自己动手丰衣足食
数组组件有很多琐碎的注意事项，需要多思考几分钟（主要是写了很多类型，我本地用了 volar 但发现该飘红的地方不一定飘红，体验略差）
目前只提供了一款表单需要的基础能力，功能比较单薄

补充

库本身体积不大，因为用的 tsc 打包所以会导致 npm 显示的体积很大，对于实际项目打包时，没有什么负面影响（要做的事太多，用的人不多我就用 tsc 打包偷懒了）

一些使用 demo 效果图

基本控件

![ee4c9a00b0f924e5806b0a2073daaf5b.md.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f210d350d71f4279ac9a08a8098129c6~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=500&h=354&s=27585&e=png&b=ffffff)^[2]

高级控件——数组

![69fc684b8b90ad10e987071f9c9ec1ad.md.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6bda351953fb4faaa7821e52d482b242~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=500&h=223&s=24646&e=png&b=ffffff)^[3]

实际代码用起来的感觉如下

![d5d0e8e86910866377c336669b684950.md.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d9e14046bb94e98b9993d22ebb00578~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=500&h=329&s=84909&e=png&b=272435)^[4]

这是简单的表单写法，其中 element 是指向具体填充组件的 key

![5b1e30fa6441874210a1db09cbd40768.md.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04da3243a3744a99b4507ace336c859a~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=500&h=235&s=57513&e=png&b=262435)^[5]

组件可以分为能嵌套的（2 个）和不能嵌套（1 个）的两种，高级写法就是把不同的表单字段分成一个个小文件，然后按照图中画圈部分进行指定使用哪个，把它们一层层给给套起来。

详细文档可以看 npm^[6]，更多 demo 可以查看仓库中的例子 github^[7]

后续规划

目前可以认为是一个尝鲜版，感兴趣可以用用，为我提提意见

后续会 j进一步优化用户的使用体验，添加更多遍历的功能，添加完善的测试，再做一个 React 版本。目标是做一个易于上手的表单解决方案，功能不在于多丰富，但一定会尽量保稳定可靠

文档我尽力写了，如果有不太懂的喊我我在改，如果用的人多我会计划单独做一个像 element-plus 那样的文档站点

如果有 bug 可以通过私信或者提 issue，有好的想法和意见都可以告诉我。我希望我造的是一个有意义的、稳定的、能真正解决问题的轮子，而不是一个显摆技术的玩具

`@usaform/element-plus` 1.0 已经发布，快速链接 ->^[8]

参考资料

[1]

https://juejin.cn/post/7319663384097259558: https://juejin.cn/post/7319663384097259558

[2]

https://www.imagehub.cc/image/1ykB0B: https://www.imagehub.cc/image/1ykB0B

[3]

https://www.imagehub.cc/image/1ykNjq: https://www.imagehub.cc/image/1ykNjq

[4]

https://www.imagehub.cc/image/1ykOXU: https://www.imagehub.cc/image/1ykOXU

[5]

https://www.imagehub.cc/image/1yk49j: https://www.imagehub.cc/image/1yk49j

[6]

https://www.npmjs.com/package/@usaform/element-plus: https://www.npmjs.com/package/@usaform/element-plus

[7]

https://github.com/usagisah/usaform/tree/main/packages/examples/element-plus: https://github.com/usagisah/usaform/tree/main/packages/examples/element-plus

[8]

https://juejin.cn/post/7325791449664340020: https://juejin.cn/post/7325791449664340020