在前端开发中，表单是几乎每个应用都离不开的核心功能。随着业务复杂度的提升，传统表单实现方式面临着代码冗余、联动困难、校验复杂等诸多挑战。Formily 作为阿里巴巴开源的表单解决方案，正是为了解决这些痛点而生的。本文将带你深入了解 Formily 的核心概念，并通过实际案例展示如何构建复杂表单。
# 一、Formily是什么
# 1.1 表单开发的痛点
在传统的表单开发模式中，我们经常会遇到以下问题：
代码重复严重：每个表单页面都需要编写大量的状态管理、校验逻辑、联动处理代码，这些代码在不同表单之间高度相似，但又无法有效复用。
联动逻辑复杂：当表单中存在多个字段之间的联动关系时，例如"选择A选项后显示B字段"、"当C字段值变化时，D字段需要自动计算"等场景，代码逻辑会变得错综复杂，难以维护。
校验规则分散：表单校验逻辑散落在组件的各个角落，有的在组件state中，有的在form的校验配置中，有的在blur事件回调中，缺少统一的校验管理。
难以动态渲染：对于需要根据后端配置动态生成表单字段的场景，传统方式实现起来非常困难。
# 1.2 Formily的核心定位
Formily 用一句话来描述，它就是一个抽象了表单领域模型的 MVVM 表单解决方案。它将表单的开发模式从传统的命令式编程转变为声明式编程，让开发者可以通过配置化的方式快速构建复杂表单。
Formily 的核心优势包括：
完善的领域模型：Formily 抽象了一套完整的表单领域模型，包括 Form（表单）、Field（字段）、Validator（校验器）等概念，让表单状态管理变得清晰可控。
强大的联动能力：支持主动模式和被动模式两种联动方式，可以轻松实现一对一、一对多、多对一等多种联动场景。
灵活的校验体系：内置强大的 @formily/validator 校验引擎，支持 JSON Schema 协议校验、自定义规则校验、异步校验等多种方式。
多框架支持：提供了 @formily/react 和 @formily/vue 两个核心包，兼容 React 和 Vue 两大主流框架。
# 二、核心概念与架构
# 2.1 MVVM架构模式
Formily 采用经典的 MVVM（Model-View-ViewModel）架构模式：
- Model（模型）：对应
@formily/core中的Form实例，管理整个表单的状态、数据、校验规则 - View（视图）：对应表单的 UI 组件，如 Input、Select 等
- ViewModel（视图模型）：对应
Field实例，连接 Model 和 View 的桥梁
这种架构模式的优势在于：表单的状态管理与 UI 渲染完全解耦，开发者可以专注于业务逻辑的实现，而无需关心状态更新的细节。
# 2.2 核心包结构
Formily 的包结构设计非常清晰，主要分为以下几个层次：
核心层：@formily/core 是整个表单解决方案的核心，负责管理表单的状态、表单校验、联动逻辑等。
桥接层：@formily/react 和 @formily/vue 分别提供了 React 和 Vue 的适配层，让核心库能够与各框架无缝集成。
组件层：@formily/antd 和 @formily/next 是基于 Ant Design 和 Alibaba Fusion 封装的组件库，提供了开箱即用的表单组件。
# 2.3 核心API概述
Formily 的核心 API 主要包括：
createForm：用于创建表单核心领域模型，它是作为 MVVM 设计模式的标准 ViewModel。
import { createForm } from '@formily/core'
const form = createForm({
// 表单初始值
initialValues: {
username: '',
password: ''
},
// 表单变化回调
onChange: (values) => {
console.log('表单值变化:', values)
},
// 副作用处理
effects: ($, { onFieldValueChange }) => {
onFieldValueChange('username', (field) => {
console.log('username 变化:', field.value)
})
}
})
