dialog 元素不自动销毁或重置数据，关闭后需手动清理：监听 close 事件重置表单字段、清空响应式数据、处理焦点和过渡残留。
dialog 元素本身不销毁任何数据，必须手动清理
<dialog></dialog> 是纯容器，没有“销毁”概念——它只控制 open 属性和视觉显示。调用 close() 后，<input> 的 value、<select></select> 的 selectedIndex、checked 状态、甚至 Vue/React 组件的内部 state 都原封不动。这不是缺陷，而是设计定位：它只管“开合”，不管“状态”。
关闭后立即清空表单字段的正确写法
必须监听 close 事件，在回调里逐项重置，不能依赖 reset()（它对 type="hidden" 无效，也不触发 change 事件）：
- 对普通文本/数字输入框：
el.value = ""+el.dispatchEvent(new Event("change", {bubbles: true})) - 对复选框/单选框：
el.checked = false - 对下拉框：
el.selectedIndex = 0或el.value = ""（需确保首个<option></option>是空值） - 对
<input type="hidden">：必须手动设el.value = ""，form.reset()完全忽略它
Vue 场景下 el-dialog 的 destroy-on-close 并非万能
destroy-on-close 确实会让子组件重新挂载（created / mounted 再次触发），但它不自动清空父级 data 中绑定的表单对象。常见坑点：
- 如果表单数据来自
props或外部data对象，关闭 dialog 后该对象仍保留旧值，再次打开时直接回显 - 即使加了
v-if="dialogVisible"，若未在@close中重置源数据，组件重建后仍会读取旧状态 - 推荐组合使用：
destroy-on-close+@close="resetForm"，其中resetForm要真正覆盖或清空响应式数据（如this.form = {...initialForm}）
容易被忽略的焦点与过渡残留问题
关闭后不处理焦点，会导致键盘操作（如 Tab）跳入已隐藏的 dialog；不等 close 事件就移除元素，可能中断 CSS 过渡动画或引发 React/Vue 错误：
- 务必在
dialog.addEventListener("close", () => { ... })回调中执行清理，而不是在close()调用后立刻操作 - 清空数据后，应主动将焦点移回主页面某个合理位置（如触发弹窗的按钮），避免焦点丢失
- 若用了
:modal伪类或[open]做过渡，关闭后 DOM 仍在，但open属性已移除，CSS 动画靠此驱动——不要用display: none强制隐藏，会打断过渡
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
