Vue 3 表单重置需保持响应式引用不变，用 Object.assign 或递归函数重置内容；动态表单可结合 Element Plus 的 resetFields；父子组件间通过 v-model 事件协同更新。
Vue 3 中表单数据的双向重置与清空，关键在于保持响应式引用不变，只更新其内部属性值。直接替换整个 reactive 对象会切断 Vue 的响应式追踪，导致视图不更新。正确做法是“动内容，不动盒子”。
保持 reactive 引用，用 Object.assign 重置
这是最常用、最直观的方案，适合结构固定或可预知的表单。
- 在
setup中定义初始数据模板，例如：const initialForm = { username: '', email: '', age: null } - 创建响应式对象：
const form = reactive({ ...initialForm }) - 重置时调用：
Object.assign(form, initialForm) - 注意：该方法不会删除运行时新增的属性，若需严格还原，可先清空再赋值，或配合
Reflect.deleteProperty处理动态字段
嵌套与动态结构用递归重置函数
当表单含多层嵌套对象、数组，或字段由后端动态生成时，Object.assign 不够用。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 封装一个通用重置工具：
function resetToDefaults(target, defaults) {<br> for (const key in defaults) {<br> if (defaults.hasOwnProperty(key)) {<br> if (typeof defaults[key] === 'object' && defaults[key] !== null && !Array.isArray(defaults[key])) {<br> resetToDefaults(target[key], defaults[key]);<br> } else {<br> target[key] = defaults[key];<br> }<br> }<br> }<br>} - 调用方式：
resetToDefaults(form, initialForm) - 支持保留 ID、status 等非重置字段，只需不在
initialForm中定义它们
结合组件库（如 Element Plus）批量调用 resetFields
适用于每个动态表单项都独立包裹 <el-form></el-form> 的场景，能同步清除校验状态和错误提示。
立即学习“前端免费学习笔记（深入）”；
- 为每个子表单分配唯一 ref：
<el-form :ref="el => formRefs[index] = el" :model="item"></el-form>
其中formRefs = ref([]) - 重置前等待 DOM 更新：
await nextTick() - 遍历调用：
formRefs.value.forEach(form => form?.resetFields()) - 确保
:model绑定的是form的子项（如item），否则仅清空数据，不重置验证
子组件中 v-model 数据的协同重置
父组件通过 v-model 向子组件传入响应式数据时，子组件不能直接覆盖 props，而应触发更新并由父组件统一重置。
- 子组件中用
computed暴露可写的 v-model：const emit = defineEmits(['update:modelValue']);<br>const model = computed({<br> get() { return props.modelValue; },<br> set(val) { emit('update:modelValue', val); }<br>}); - 父组件负责维护
reactive数据，并在重置时更新绑定值，子组件自动响应 - 避免在子组件内写
props.modelValue = {...}，这会报错且破坏响应链
