三、formily的字段联动实战：基于vue3+JsonSchema+ant-design-vue的动态表单设计

1. Formily字段联动基础概念

动态表单开发中最让人头疼的就是字段之间的联动逻辑。比如选择"身份证"时显示身份证号输入框，选择"银行卡"时变成银行卡号输入框，这种需求在传统开发中需要写大量监听逻辑。Formily的x-reactions机制就像给表单装上了智能开关，让字段间的互动变得异常简单。

我第一次用Formily做政务系统时，有个表单需要根据20多个字段状态动态变化。如果用传统方法，光写监听事件就得几百行代码。而用x-reactions，所有联动逻辑都通过JSON配置完成，代码量减少了80%。这让我深刻体会到声明式编程的魅力——你只需要告诉表单"什么时候变成什么样"，而不需要操心"怎么变"的具体过程。

x-reactions的核心原理是响应式编程。当我们在Schema中定义"x-reactions":{...}时，就相当于给字段装上了传感器。这个传感器可以监听其他字段的变化（通过dependencies），也可以主动影响其他字段（通过target）。当被监听的字段值变化时，Formily会自动计算新状态并更新UI，整个过程完全不需要手动操作DOM。

2. 基础联动：A字段控制B字段显示

2.1 target属性实战

让我们用个实际案例来理解target的用法。假设我们要做个证件信息表单，选择不同证件类型时，号码输入框的标题和显示状态要相应变化：

const schema = { type: "object", properties: { cardType: { title: "证件类别", type: "string", enum: [ { label: "身份证", value: "1" }, { label: "银行卡", value: "2" } ], "x-reactions": { target: "cardNo", fulfill: { state: { title: "{{$self.value === '1'?'身份证号':'银行卡号'}}", visible: "{{$self.value!=undefined}}" } } }, "x-component": "Select" }, cardNo: { type: "string", "x-component": "Input" } } }

这段代码实现了三个关键功能：

1. 当cardType值为"1"时，cardNo的title变成"身份证号"
2. 当cardType值为"2"时，title变成"银行卡号"
3. 只有选择了证件类型后，cardNo输入框才会显示

我在实际项目中发现几个常见问题：

• target路径问题：当字段嵌套在多层object中时，target要写完整路径如"parent.child.field"
• 表达式错误：模板字符串内要用{{}}包裹，且表达式要返回有效值
• 初始状态问题：记得处理字段初始值为undefined的情况

2.2 多字段联动技巧

更复杂的场景可能需要一个字段控制多个目标。比如选择"企业用户"时，不仅要显示税号字段，还要隐藏个人相关字段。这时可以用数组形式的target：

"x-reactions": { target: ["fieldA", "fieldB"], fulfill: { state: { // 同时更新多个字段 } } }

3. 依赖联动：B字段响应A字段变化

3.1 dependencies机制详解

有时候我们需要让字段B根据字段A的值动态调整自身属性。这时就该dependencies出场了。与target不同，dependencies是"被动模式"——字段B声明自己依赖哪些字段，当这些字段变化时自动触发更新。

改造前面的例子：

const schema = { type: "object", properties: { cardType: { title: "证件类型", type: "string", enum: [ { label: "身份证", value: "1" }, { label: "银行卡", value: "2" } ], "x-component": "Select" }, cardNo: { type: "string", "x-component": "Input", "x-reactions": { dependencies: ["cardType"], fulfill: { schema: { title: "{{$deps[0]=='1'?'身份证号':'银行卡号'}}", "x-visible": "{{$deps[0]!=undefined}}" } } } } } }

这里有几个关键点：

1. dependencies数组定义依赖字段路径
2. $deps[0]指向dependencies的第一个元素cardType的值
3. 在fulfill中可以修改schema的任何属性

3.2 多依赖场景处理

当字段依赖多个其他字段时，dependencies数组按顺序存放所有依赖项。比如：

"x-reactions": { dependencies: ["fieldA", "fieldB"], fulfill: { schema: { title: "{{$deps[0] + ' - ' + $deps[1]}}" } } }

我在金融项目中遇到过需要同时依赖5个字段的情况。这时要特别注意：

1. 确保$deps索引与dependencies顺序一致
2. 复杂逻辑建议提取到外部函数处理
3. 考虑性能影响，避免不必要的重复计算

4. 高级联动技巧与性能优化

4.1 条件联动与复杂表达式

对于更复杂的业务逻辑，可以在表达式中使用三元运算符或调用外部函数。比如根据省份和城市联动加载不同的区县选项：

"x-reactions": { dependencies: ["province", "city"], fulfill: { schema: { enum: "{{loadDistricts($deps[0], $deps[1])}}" } } }

这里loadDistricts是预先定义好的函数。实测发现，将复杂逻辑提取到外部函数可以：

1. 保持Schema的简洁性
2. 方便复用相同逻辑
3. 更易于调试和维护

4.2 性能优化实践

在大表单中，不当的联动设计可能导致性能问题。以下是几个优化技巧：

1. 减少不必要的依赖：只监听真正需要的字段
2. 使用debounce：对频繁触发的联动添加延迟
3. 缓存计算结果：对耗时的计算进行缓存
4. 懒加载选项：对于大型枚举数据动态加载

我曾经优化过一个包含50多个联动字段的表单，通过以下改动将响应速度提升了3倍：

• 将即时计算改为手动触发
• 对远程加载的选项添加缓存
• 拆分大型表单为多个子表单

5. 常见问题排查指南

5.1 调试技巧

当联动不生效时，可以按以下步骤排查：

1. 检查字段路径是否正确（大小写敏感）
2. 在表达式里打印调试信息：{{console.log($deps)}}
3. 确认Schema结构是否符合预期
4. 检查浏览器控制台是否有错误

5.2 典型错误案例

1. 循环依赖：A依赖B，B又依赖A会导致死循环
2. 路径错误：嵌套字段需要完整路径如"obj1.obj2.field"
3. 初始化顺序：确保依赖字段先于被依赖字段初始化
4. 异步问题：远程加载数据要考虑时序问题

有次我遇到联动莫名其妙失效，最后发现是因为字段名拼写错误。这种低级错误往往最难发现，建议：

• 使用TS类型定义Schema结构
• 建立字段名常量池
• 编写单元测试验证联动逻辑

Formily的联动机制就像给表单注入了智能基因，让静态的表单活了起来。从简单显示隐藏到复杂业务规则，x-reactions都能优雅应对。刚开始可能需要适应声明式的思维方式，但一旦掌握，你会发现表单开发原来可以如此高效。