Radix-Vue/Shadcn-Vue 表单字段在折叠面板中丢失初始值问题解析

问题现象

在使用 Radix-Vue/Shadcn-Vue 构建表单时，开发者发现当表单字段嵌套在折叠面板(Accordion)组件中时，会出现初始值丢失的问题。具体表现为：

1. 首次展开折叠面板时，表单字段能正确显示初始值
2. 关闭折叠面板后再次打开，之前设置的初始值会消失
3. 问题同时出现在常规 FormField 和 AutoForm 组件中

技术背景

这个问题的本质与 Vue 的组件生命周期和状态管理有关。在 Vue 中，当组件被卸载(如折叠面板关闭)时，默认情况下其内部状态会被销毁。对于表单场景，这意味着：

• 表单字段的当前值会被重置
• 初始值不会自动保留
• 验证状态等信息也会丢失

解决方案

通过使用 useForm 的 keepValuesOnUnmount 选项可以解决这个问题。这个选项的作用是：

1. 当设置为 true 时，即使表单组件被卸载，其值也会被保留
2. 组件重新挂载时，会恢复之前的状态
3. 特别适合用于动态显示/隐藏的表单场景

实现示例

const form = useForm({
  validationSchema: toTypedSchema(schema),
  initialValues,
  keepValuesOnUnmount: true // 关键配置
})

最佳实践建议

1. 对于复杂表单结构，特别是包含动态显示/隐藏部分的表单，建议始终启用 keepValuesOnUnmount
2. 注意内存管理，长期保留大量表单值可能影响性能
3. 对于特别大的表单，可以考虑分段保存状态
4. 在组件卸载时手动清理不再需要的表单数据

原理深入

这个问题的解决方案背后是 Vue 的状态保持机制。keepValuesOnUnmount 实际上是在表单组件的 setup 阶段使用 Vue 的响应式系统来持久化表单状态，即使组件实例被销毁，这些响应式引用仍然保留在内存中，当组件重新挂载时可以恢复之前的状态。

理解这一点对于处理类似场景非常重要，它体现了现代前端框架中状态管理与组件生命周期的关系。