Formily——MVVM 表单解决方案学习 - 图1Formily分层：内核层，UI 桥接层，扩展组件层，和配置应用层
内核层：内核库为@formily/core，它负责管理表单的状态，表单校验，联动等等
UI 桥接库：用来实现最终的表单交互效果【@formily/react @formily/vue】
组件库：在antd基础上封装了@formily/antd 和@formily/next，保证开箱即用

以上作为Formily这个表单管理方案的分层结构，接下来再对每层次的结构进行逐层分析。

内核层常用组件API：

createForm：创建一个 Form 实例，作为 ViewModel 给 UI 框架层消费

属性 描述 类型 默认值
values 表单值 Object {}
initialValues 表单默认值 Object {}
pattern 表单交互模式 “editable” | “disabled” | “readOnly” | “readPretty” “editable”
display 表单显隐 “visible” | “hidden” | “none” “visible
hidden UI 隐藏 Boolean true
visible 显示/隐藏(数据隐藏) Boolean true
editable 是否可编辑 Boolean true
disabled 是否禁用 Boolean false
readOnly 是否只读 Boolean false
readPretty 是否是优雅阅读态 Boolean false
effects 副作用逻辑，用于实现各种联动逻辑 (form:Form)=>void
validateFirst 是否只校验第一个非法规则 Boolean false 
  1. import { createForm } from '@formily/core'
  3. const form = createForm({
  4.   initialValues: {
  5.     say: 'hello',
  6.   },
  7. })