Soybean Admin 中表单模型初始化的最佳实践

问题背景

在 Soybean Admin 项目中，开发者在使用对话框进行表单操作时遇到了一个常见问题：当用户完成编辑操作后关闭对话框，再次打开新建对话框时，表单模型中仍然保留着上次编辑的数据（如 id 和 createTime 等字段）。这显然不符合用户预期，因为新建操作应该提供一个全新的空白表单。

技术分析

问题的核心在于 Vue 3 的响应式数据管理和表单模型初始化策略。原代码使用了 Object.assign 方法来合并默认模型和行数据：

function handleInitModel() {
  Object.assign(model, createDefaultModel());
  
  if (props.operateType === 'edit' && props.rowData) {
    Object.assign(model, props.rowData);
  }
}

这种方法存在两个潜在问题：

1. 浅合并问题：Object.assign 执行的是浅拷贝，如果模型中有嵌套对象，可能会导致引用共享问题
2. 响应式数据覆盖不完全：当从编辑切换到新建时，原有字段可能不会被完全覆盖

解决方案

更可靠的实现方式是使用 Vue 3 的 ref 替代 reactive，并完全替换模型值而非合并：

function handleInitModel() {
  if (props.operateType === 'add') {
    model.value = createDefaultModel();
    return;
  }

  if (!props.rowData) {
    return;
  }

  model.value = props.rowData;
}

这种实现方式有以下优势：

1. 明确的状态区分：清晰地区分"新增"和"编辑"两种操作模式
2. 完全的模型重置：在新增操作时，完全用新对象替换原有模型
3. 更好的响应式保证：使用 ref 的 .value 赋值确保响应式系统正确追踪变化

深入理解

在 Vue 3 的响应式系统中，ref 和 reactive 有不同的适用场景：

• ref：更适合用于基本类型和对象替换场景，通过 .value 访问和修改
• reactive：更适合用于复杂对象，但不适合整体替换

表单场景通常更适合使用 ref，因为：

1. 经常需要完全重置表单数据
2. 表单提交后通常需要清空或重置模型
3. 避免因对象引用导致的意外共享状态

最佳实践建议

1. 明确初始化逻辑：区分"新增"和"编辑"两种场景，分别处理
2. 完全替换而非合并：使用赋值而非 Object.assign 来避免残留数据
3. 考虑深拷贝：如果模型包含嵌套对象，考虑使用深拷贝函数
4. 添加类型检查：在 TypeScript 项目中，为模型添加明确的接口类型
5. 重置时机：在对话框关闭时显式重置模型，而不仅依赖打开时初始化

总结

在 Soybean Admin 这样的管理后台项目中，正确处理表单模型的状态是保证用户体验的关键。通过使用 ref 替代 reactive，并采用完全替换而非合并的策略，可以确保表单在各种操作场景下都能正确初始化。这种模式不仅适用于当前的具体问题，也可以推广到其他需要管理复杂表单状态的场景中。