动态表单逻辑应封装为useForm组合式函数，核心是解耦状态管理、联动响应、验证执行、提交控制四部分，基于schema驱动表单值、错误、运行时属性及字段影响关系，并提供validate、submit等语义化接口。
动态表单逻辑封装在组合式函数中，核心是把“字段配置驱动行为”这一整套能力抽离成可复用、可测试的 useForm 函数，而不是把所有逻辑塞进组件的 setup 里。重点在于：状态管理、联动响应、验证执行、提交控制这四块要解耦清晰，且对外暴露语义明确的方法和响应式数据。
定义 schema 驱动的表单状态
schema 是动态表单的“源数据”，它描述字段类型、依赖关系、校验规则等。组合式函数需基于 schema 初始化响应式表单值与错误状态：
- 用
reactive管理formValues，初始值由 schema 中的default或空值推导 - 用
ref控制isSubmitting、isTouched等全局状态 - 用
reactive存储formErrors，键名与字段field对齐，便于模板直接绑定 - 支持字段级
hidden、disabled、required等运行时计算属性，通过computed动态返回
封装联动逻辑：watch + 字段影响图
字段联动不是靠一堆 v-if 和手动 watch，而是构建“字段影响关系”并集中响应：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- schema 中每个字段可声明
dependsOn: ['province']或trigger: (val, values) => values.province === 'guangdong' - 组合式函数内部遍历 schema，对有依赖的字段建立
watch，监听其依赖字段变化 - 触发时自动更新目标字段的
hidden、required、options（如城市列表），并清空其当前值和错误 - 避免嵌套 watch 或重复触发，可用
watchEffect+onInvalidate控制副作用生命周期
统一验证与提交流程
验证不是每个字段写一遍 rules 就完事，而要支持跨字段校验、异步规则、错误聚合：
-
validate()方法返回Promise，逐字段执行同步/异步 rule（如邮箱唯一性需调接口） - rule 定义为
{ validator: (val, values) => Promise，支持闭包访问完整表单值| boolean, message: string } -
submit()内部先调validate()，成功后才触发onSubmit(formValues)回调，全程控制isSubmitting - 提供
validateField(field)单字段校验，供输入时实时提示（搭配@blur或防抖@input）
暴露简洁、稳定的对外接口
组件只需解构使用，不关心内部如何联动或验证——这才是封装的价值：
- 返回对象包含：
formValues、formErrors、isSubmitting、validate、submit、reset、setData - 所有方法都绑定正确作用域，支持在 setup 或 script setup 中直接解构，无 this 问题
- 支持传入初始数据和校验规则，但不强制；未传时默认空对象 + 空规则，保持轻量
- 错误信息支持 i18n key，由上层决定是否翻译，组合式函数只管存原始 message 或 key
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
