重置表单时需同步清除错误状态与校验痕迹；Vue 3 + Element Plus 中须通过 ref 调用 resetFields()，并确保 nextTick 后执行；未设 prop 的字段需手动重置；clearValidate 可仅清错误不改值；弹窗场景应在关闭或打开前组合调用 clearValidate 和 resetFields。
重置表单时清除错误状态，关键不是只清数据，而是同步清理校验痕迹——比如红边框、错误提示文字、内部校验标记。Vue 3 配合 Element Plus 时，resetFields() 是最直接有效的入口，但需注意调用时机和配套操作。
必须用 ref 获取表单实例再调用 resetFields
Element Plus 的 el-form 不提供全局方法，必须通过 ref 拿到组件实例：
- 给表单加唯一 ref，例如：
<el-form ref="formRef" :model="form" :rules="rules"> - 在方法中确保 ref 已就绪，推荐加
nextTick防止 DOM 未更新导致调用失败：await nextTick(); formRef.value?.resetFields(); - 不加 ref 或 ref 未挂载就调用会报错或静默失效
resetFields 只清 prop 字段，没写 prop 的项不会被重置
这是常见漏点：表单里某个 el-form-item 没配 prop 属性，即使它绑定了 model，resetFields 也不会动它。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 检查每个
el-form-item是否写了prop="xxx"，且值与model对象的字段名、rules的键名完全一致 - 例如：
form = { name: '' }，那对应项必须是<el-form-item prop="name">，不能是prop="userName" - 没写 prop 的字段，需手动重置：
form.name = ''
需要“只清错误不重置值”时用 clearValidate
比如切换表单类型后规则变了，旧字段还留着红框和提示，但用户填的内容想保留：
立即学习“前端免费学习笔记（深入）”；
- 调用
formRef.value?.clearValidate()清除全部字段的错误样式和提示 - 支持精准清除：
formRef.value?.clearValidate(['email', 'phone']) - 它不改 model 值，也不触发新校验，适合动态 rules 场景
弹窗场景下，关闭时重置更可靠
新增/编辑共用一个弹窗时，容易出现上次残留数据和错误状态：
- 在
@close或v-model改变的回调里执行重置逻辑 - 推荐组合使用：
formRef.value?.clearValidate();<br>await nextTick();<br>formRef.value?.resetFields();
- 如果弹窗内容用
v-if控制销毁，重置可放在onBeforeUnmount；若用v-show，则每次打开前主动重置
