Vue3嵌套对象/可复用增改表单实现最佳实践咨询

1. 是否需要拆分联系人、地址表单子组件？ #

要拆，收益非常明显：

• 两个子表的增删改、字段校验逻辑完全独立，全塞在父组件里很容易让单文件代码破千行，后期改个联系人字段都要翻半天代码，维护成本极高
• 拆分子组件后不需要关心当前是创建还是更新场景，只需要对外暴露「当前子项列表」「未保存修改标记」「表单校验方法」三个核心能力，父组件统一做流程调度就行
• 子组件可以独立做行级校验、行内编辑状态管理，不用等整个大表单点提交才弹出校验错误，交互体验会好很多

2. 表单数据应当采用何种存储方式？ #

不用在「单一对象全托管」和「分散ref各自维护」里二选一，用「父组件持有全局根状态 + 子组件维护行级编辑临时态」的混合模式最顺手，一套结构同时兼容创建、更新场景：

• 父组件用reactive维护统一的根状态，结构直接对齐后端接口数据模型，参考代码：

// 父组件核心状态
const formState = reactive({
  entity: {}, // 实体基础字段
  contacts: [], // 关联联系人列表
  addresses: [], // 关联地址列表
  mode: 'create', // 标记当前场景：create创建 / update更新
  deletedContacts: [], // 暂存更新场景下被删除的存量联系人ID
  deletedAddresses: [] // 暂存更新场景下被删除的存量地址ID
})

• 所有前端临时新增、还没同步到后端的子项，统一加_isNew: true和_clientId: crypto.randomUUID()两个自定义标记，前者用来区分是新增还是存量数据，后者作为前端层面的唯一标识，不用等后端返回ID就能做列表的增删改定位
• 不要把所有细碎状态都堆到父组件：子组件编辑某一行联系人/地址时，自己维护当前行的临时输入值、字段校验错误提示，等用户点行内的「确认保存」，再把校验通过的值同步回父组件的根状态，避免父组件存一堆无效的中间错误状态

3. API调用的最优方案是什么？ #

不存在绝对最优，根据产品交互选就行，核心逻辑可以完全复用，不用给创建、更新写两套代码。
首先纠正一个常见误区：觉得创建场景的提交逻辑没法复用到更新场景，本质是没给临时数据做前端标记，只要标记规则统一，逻辑完全通用：

• 如果做的是传统整表单提交交互（用户填完所有内容点一次「保存」）：
  1. 先触发实体主表单、两个子表单的全量校验，有错误直接阻断提交
  2. 如果是创建场景，先调实体创建POST接口，拿到后端返回的entityId；如果是更新场景直接跳过这步
  3. 拿到entityId后统一处理子表数据：
     • 带_isNew: true标记的子项，调子表新增POST接口，关联到当前entityId
     • 存量子项里有字段修改的，调子表更新PUT接口
     • 存在deletedContacts/deletedAddresses里的存量子项，调子表删除DELETE接口
       整个流程创建和更新只有第二步的区别，剩下的子表处理逻辑100%复用。
• 如果想做更顺滑的边操作边存交互（用户加一个联系人就立刻同步到后端，不用等最后点大保存）：只需要加一层判断：当前是创建场景、还没拿到entityId时，把新增/修改/删除的子项先暂存到本地操作队列，等实体创建成功拿到ID后，自动把队列里的操作按顺序补提交就行；如果是更新场景，用户每次点行内保存就直接触发对应子项的接口调用。两种交互的核心子项处理逻辑完全一致，只是触发时机不同。

实用小提示 #

• 不要在子组件里直接修改父组件传入的props值，所有状态修改都通过emit抛事件给父组件处理，避免多组件改同一状态导致的问题溯源困难
• 提交接口时加全局loading锁，防止用户重复点击触发多次重复请求
• 如果需要做草稿暂存功能，直接把父组件的formState转成JSON存localStorage就行，因为结构是统一的，创建和更新场景的草稿读取逻辑也能复用

内容的提问来源于stack exchange，提问作者PedroUlt