三个模式，一个实例
新建、编辑、详情都由弹窗或表单页里的同一个 form 管。
load('edit', detail) 会同步重置基线和 dirty。
Skip to content 基线未改
UI Form 之外的重复代码
字段校验有组件管，表单生命周期还散在每个页面里。
后台项目会反复写模式切换、重置基线、提交锁、条件规则、数组 key 和接口错误。vformjs 沿用宿主 Form 的红字和焦点，只把这些重复状态收回到一个有类型的实例里。
每个页面重新写
- 弹窗模式分支
- 重置时机和旧错误
- 动态行 key
- 提交 loading
- 条件规则清理
交给 form 实例
load('create' | 'edit' | 'detail')dirty + changedPathslist('contacts')submit() + submittingwhen + whenRules
现场状态
Element Plus切模式、改字段，看同一份契约怎么动。
下面的小表单直接演示 baseline、dirty、服务端错误和详情只读语义。
一层薄编排
宿主负责渲染，vformjs 把生命周期接稳。
每个 API 都对应后台表单里一段常见的重复代码。库里没有替代输入框，也不会再塞一套设计系统。
沿用宿主校验
Element、Naive UI、Antd 继续管理 rules、红字和滚动。
adapter 只桥接 validate、clear 和 scroll。
接口错误回到字段
服务端字段错误保持响应式，字段一改，旧错误就清掉。
setErrors() → errors → scrollToFirstError()。
联动留在业务代码里
模板照常写，显隐、动态规则和下拉选项集中到 TypeScript。
when、whenRules、linkage 各管一件事。
动态行有稳定 key
新增、移动、替换、删除嵌套行，不再拿数组下标充当 key。
list('items') 提供稳定 fields。
Schema 按需接入
需要 schema-only 校验和转换后的提交值时，再用 Zod。
无 UI 宿主也能完成 schema 校验。
最短接入路径
写 defaults，绑定一次宿主，剩下的是业务代码。
Element Plus 入口已经配好 adapter，model 和 onSubmit 的类型直接从 defaults 推出来。
写默认值和规则
defaults 同时确定模型和提交参数类型。
useElForm({ defaults, rules, onSubmit })绑定现有 Form
一个 v-bind 接好 ref、model 和 rules。
<el-form v-bind="form.host">驱动表单生命周期
加载记录、提交、重置，再读取 dirty。
form.load('edit', detail)
怎么选
团队想保留现有 UI Form，vformjs 才进入候选。
先定字段状态由谁持有，选型会简单很多。
| 方案 | 状态和校验 | CRUD 生命周期 | 适用场景 |
|---|---|---|---|
| UI 库原生 Form | 宿主持有 | 每页手写 | 项目只有少量简单表单 |
| vformjs | 宿主校验 + 共享状态 | 内置 | 后台页面多，继续使用现有 UI 库 |
| vee-validate / Vuelidate | 独立表单引擎 | 业务自行组织 | 团队需要字段级 headless 控制 |
| FormKit / FormCreate | 组件或 Schema Runtime | 框架持有 | 团队要生成式或低代码表单 |
同一批字段不要同时绑定 vformjs 和另一套完整表单引擎。状态只留一个主人。