原生dialog关闭后数据与dom均不自动清空，需手动重置表单、清除状态及校验；安全采集数据应在点击按钮后、close()前用formdata；method="dialog"仅传submit按钮value，不传input值；close()无参，returnvalue须提前设置；vue中el-dialog需主动重置data并nexttick后清校验。
dialog 关闭后数据不会自动清空，也不会自动销毁 DOM；所有表单字段、状态、校验残留都得你手动处理。
dialog.close() 不会重置表单或清除状态
点击确认按钮调用 dialog.close() 后，<input>、<select></select> 的值依然保留在 DOM 中，下次再 showModal() 时直接复用——这在编辑场景下极易导致脏数据。浏览器不提供任何“关闭即重置”的默认行为。
- 不能依赖
dialog.open = false或remove()来规避：前者不触发close事件，后者直接删 DOM，后续showModal()会失败 - 不要等
close事件里读取表单值：此时 DOM 可能已不可靠（尤其用了open=false或 CSS 隐藏） - 真正安全的数据采集时机，是在用户点击“确认”或“取消”按钮的那一刻，且必须在调用
close()之前
用 form method="dialog" 时，value 不等于表单数据
<form method="dialog"></form> 确实能自动关闭并传值，但只传 <button type="submit"></button> 的 value 属性，**完全忽略所有 <input> 字段内容**。很多人误以为点“提交”就能拿到整个表单，结果 await dialog.showModal() 返回的只是字符串 "confirm"，不是对象。
- 必须显式用
new FormData(form)提前收集数据，再决定是否调用close() - 若校验失败，别调用
close()——method="dialog"是“一触即发”，没有回滚机制 - 多个
type="submit"按钮时，只有被点击的那个的value会被写入event.returnValue；未设value就是空字符串，容易误判为“取消”
监听 close 事件时，event.returnValue 和 dialog.returnValue 不是一回事
标准中，dialog 元素本身**没有 returnValue 属性**；所谓“返回值”，其实是 close 事件对象上的 event.returnValue 字符串。它只在你显式调用 dialog.close()（且提前设置了 dialog.returnValue = 'xxx'）时才有意义。Esc 或点击遮罩关闭时，event.returnValue 恒为空字符串 ""，不是 undefined。
- 监听必须绑定在
dialog元素上，不能委托；且最好在showModal()之前就绑定，避免事件丢失 -
dialog.returnValue = 'submit'必须出现在dialog.close()调用之前，顺序错了就读不到 - 不要试图给
dialog.close('submit')传参——这个参数被浏览器完全忽略，close()是无参函数
Vue 场景下 el-dialog 数据残留的根因和解法
Element UI 的 el-dialog 不是原生 <dialog></dialog>，它的 destroy-on-close 属性常失效，v-if 控制显示也容易引发闪烁或校验报错——根本原因是组件实例未真正销毁，data 和 rules 仍被复用。
- 推荐在“打开弹窗”前重置：用
Object.assign(this.form, this.$options.data().form)而非this.form = {...}，避免响应式丢失 - 校验规则清空必须在
$nextTick后调用this.$refs.form.clearValidate()，否则 DOM 未更新会导致clearValidate报错或无效 - 如果用同一个弹窗做“新增”和“编辑”，务必在打开前判断：是编辑则赋值，是新增则强制重置，不要共用同一份初始 data
最易被忽略的一点：原生 <dialog></dialog> 没有“关闭回调钩子”，所有数据清理、状态重置、校验清除动作，都得你在按钮点击逻辑里一手包办——没有框架帮你兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
