背景
后台系统里最难维护的页面之一，就是大表单：
- 字段多
- 联动多
- 校验规则多
- 草稿和提交逻辑分叉
如果状态设计不清晰，后期改一个字段就会牵动全局。
实用拆分
- 表单值与 UI 状态分离
- 同步校验与异步校验分离
- 页面状态按分区拆 composable
const formValue = reactive({
name: '',
email: '',
company: '',
})
const uiState = reactive({
submitting: false,
dirty: false,
activeTab: 'basic',
})
防止无效重渲染
- 大对象不要全量深监听
- 使用按字段 watch
- 拆分子组件隔离更新范围
watch(
[() => formValue.email, () => formValue.company],
() => {
validateContactFields()
}
)
总结
大表单的关键不是“怎么写更快”，而是“怎么改不炸”。
前期做好状态边界，后期迭代成本会低很多。
复杂页面最终拼的是可维护性，不是首版速度。