Vue3 + Element Plus 踩坑记录：弹框表单回显残留与 Object.assign 陷阱详解

在开发 Vue 3 中后台管理系统的菜单/用户管理模块时，“表单弹框”是个高频交互场景。今天在处理菜单编辑与新增时，遇到了一个经典的奇葩 Bug：先点击“编辑”按钮打开弹框回显数据后，关闭弹框再点击“新增”，弹框里居然而然还残留着刚才编辑的内容！

经过排查和重构，发现这是由 Vue3 响应式对象引用污染以及 Object.assign 赋值机制导致的。本文记录完整的填坑过程。

💥 为什么会产生“回显残留”？

起初，代码里通常会定义一个全局的 initialForm 初始对象，然后用 reactive 绑定：

const initialForm = {
  name: "",
  path: "",
  // ... 其他字段
}
const formModel = reactive(initialForm)

当点击“编辑”时，使用 Object.assign(formModel, initialForm, row) 把当前行的数据合进去。

• 致命原因：initialForm 是一个写在顶部的普通对象。当你把 row 合并进 formModel 时，如果不够严谨，或者多次赋值，会导致 initialForm 内部的属性或引用遭到污染。

• 仅仅依赖 formRef.value.resetFields() 是无法解决这种深层污染的，因为 Element Plus 的 resetFields() 只认组件刚挂载时的状态，对被污染的响应式对象束手无策。

🛠️ 正确的终极解法

要彻底根治残留问题，核心思路是：放弃全局共享的初始对象，改用“工厂函数（Factory Function）”，每次都动态生成一颗崭新、干净的初始状态树。

1. 将初始对象改造成工厂函数

// 每次调用都返回一份全新的、内存独立的干净对象
const getInitialForm = () => ({
  id: "",
  parentId: 0,
  name: "",
  type: 0,
  path: "",
  component: "",
  perms: "",
  icon: "",
  sortValue: 1,
  status: 1,
})

// 表单对象初始化
const formModel = reactive(getInitialForm())

2. 新增与编辑时的干净赋值

• 新增时：直接用全新对象覆盖，瞬间清空。

• 编辑时：先恢复默认，再把当前行数据合并进去。

// 新增菜单
const handleAdd = async () => {
  dialogState.visible = true
  dialogState.title = "新增菜单"
  dialogState.type = "add"
  
  // 核心：每次都生成全新的干净对象进行覆盖
  Object.assign(formModel, getInitialForm())
  
  await nextTick()
  formRef.value?.clearValidate()
}

// 处理编辑
const handleEdit = async (row) => {
  dialogState.title = "编辑菜单"
  dialogState.visible = true
  dialogState.type = "edit"
  
  // 先恢复默认，再把当前行数据合并进去
  Object.assign(formModel, getInitialForm(), row)
  
  await nextTick()
  formRef.value?.clearValidate()
}

💡 几个关键技术点小结

1. 为什么用工厂函数 getInitialForm()？ 在 JS 中，对象是引用传递。如果多个地方共用一个静态对象，一处修改处处污染。函数每次调用都会在内存中开辟一块新的区域，彻底杜绝数据残留。

2. 为什么要加 await nextTick()？ dialogState.visible = true 触发弹框显示后，DOM 是异步渲染的。如果不加 nextTick，去调用 formRef.value.clearValidate() 时表单组件还没挂载完，会导致 formRef.value 为 null 从而报错。

3. 表单校验优雅简写 Element Plus 的 validate() 在不传回调函数时会返回一个 Promise，配合 async/await 和 try...catch，可以让表单提交逻辑告别传统的回调嵌套，变得像流水线一样清晰。