Vue3表单引擎联动配置对比，JuanForm与FormCreate的实现逻辑差异分析

在低代码开发趋势下，基于 JSON Schema 动态渲染表单已成为前端工程化的重要方向。尤其在 Vue3 技术栈中，如何高效实现字段间的联动逻辑（如显隐控制、值依赖更新等），直接关系到开发者体验与业务迭代效率。近期，开发者“全栈小卷”对自研的 JuanForm 与开源项目 FormCreate 在联动配置能力上进行了实测对比，揭示了二者在架构设计与配置语义上的关键差异。

当前主流的 Vue3 表单引擎多采用声明式 Schema 配置驱动 UI 渲染，但对“作用域”与“响应式链路”的处理方式各不相同。以最基础的“开关控制字段显隐”需求为例：用户希望勾选“隐藏姓名”后，姓名输入框不仅视觉隐藏，其对应的数据模型字段也应被清除，避免提交冗余空值。

JuanForm 的配置方案如下：

该配置中，hidden 字段直接接收一个箭头函数，参数 scope 即当前表单项所在层级的作用域对象，可直接访问同级或父级字段值。这种设计将数据流与视图层结构对齐——children 表示行级分组，items 表示列内组件，天然支持非固定栅格布局；同时，hidden 函数在响应式上下文中自动触发重计算，无需手动监听事件。

更关键的是，JuanForm 在隐藏字段时会同步清理其绑定的模型值（如将 name 设为 undefined 或删除键），确保最终提交数据干净。这一行为由引擎底层统一管理，开发者无需额外编写副作用逻辑。

此处 control 中的 handle 函数返回布尔值决定目标字段是否启用，rule: ['name'] 指明受影响字段。但需注意：该机制仅控制组件是否渲染（即 DOM 是否存在），并不自动清理模型数据。若未额外处理，当 hideName 为 true 时，fcData.value.name 仍保留原值，可能导致后端接收到无效字段。

此外，FormCreate 的配置粒度更偏向“表单级”，其 v-model 绑定的是整个表单数据对象，而 JuanForm 的 schema 更强调“页面级”结构组织，允许嵌套多层 children 与 items，便于构建复杂布局（如折叠面板内嵌表单、动态增删区块等）。从 Vue 响应式原理看，JuanForm 的 scope 机制更贴近 Composition API 的 reactive 与 computed 组合使用习惯，而 FormCreate 的 control 方式则类似早期 Options API 中的手动 $watch 逻辑封装。

而 FormCreate 需借助 form-create 实例方法或全局状态管理来传递跨层级依赖，配置复杂度显著上升。其文档虽提供 vm 访问方式，但易引发闭包陷阱与内存泄漏风险。

从工程实践角度，两类引擎的定位差异明显：FormCreate 作为成熟开源库，覆盖表单校验、动态规则、异步加载等完整能力，适合快速搭建标准表单；JuanForm 则聚焦于“与 Vue3 原生机制深度对齐”，在作用域隔离、响应式穿透、数据净化等方面做了针对性优化，更适合需要高定制性与长期维护的中后台系统。

值得注意的是，随着 AI 辅助编码普及，表单生成正逐步转向“AI 输出 JSON Schema → 引擎渲染”的流水线。此时，Schema 的可读性、扩展性与执行确定性成为关键指标。JuanForm 的配置语法更接近 TypeScript 类型定义风格，利于 IDE 自动补全与静态检查；FormCreate 的规则数组虽灵活，但缺乏类型推导支持，在大型项目中易出现运行时错误。

目前，低代码表单引擎尚未形成统一标准。除上述两者外，还有 Arco Design Form、Naive UI Schema Form 等方案，但多数仍停留在“组件映射”层面，未能解决联动逻辑的声明式表达问题。未来演进方向可能包括：引入类似 Vue 的