form.reset() 仅重置 dom 状态而不更新 react/vue 的响应式数据，需手动同步 state、动态字段、第三方控件及校验状态，并在 form 元素上监听 reset 事件拦截确认。
form.reset() 在 React/Vue 表单里根本不动 state
点击 type="reset" 或调用 form.reset()，只修改 DOM 的 value、checked 等属性，但 React 的 useState 或 Vue 的响应式数据完全不受影响。界面看起来“没变”，其实是 DOM 值被重置了，而组件 state 还停留在用户上次输入的状态。
常见错误现象：input 显示为空，但 console.log(state) 仍是旧值；提交时发出去的还是老数据；表单校验仍基于 stale state。
- React 场景下，必须配合
useForm（如 react-hook-form）的reset()方法，它同步更新 DOM 和内部 state - Vue 场景下，不要依赖原生
reset，改用ref.value = { ...initialValues }或formRef.reset()（若用 Element Plus / Ant Design Vue） - 纯 DOM + 手动绑定的 SPA（如用 Alpine.js），需在
reset后手动同步：遍历form.elements并赋值给对应 data 字段
动态添加字段不参与 reset 是常态，不是 bug
SPA 中常见的“添加一行地址”、“新增附件”逻辑，往往通过 appendChild() 或框架的列表渲染插入新 input。这些节点不在页面初始 HTML 中，因此没有 defaultValue、defaultChecked，form.reset() 对它们完全无视。
使用场景：用户填了 3 行收货地址，点击重置 → 前两行（初始 DOM）恢复默认值，第三行（JS 动态加）还在，且值不变。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 解决办法不是“让它参与 reset”，而是重置前主动清理：
document.querySelectorAll('[data-dynamic-field]').forEach(el => el.remove()) - 更稳妥的是封装统一重置函数，先清空动态区域，再调
form.reset()，最后恢复初始结构（如重新渲染空行） - 如果字段带校验状态（如红色边框、error message），记得一并移除对应 class 或 DOM 节点，否则视觉残留
富文本、日期选择器等第三方控件需要单独处理
form.reset() 只对原生 input、textarea、select、button 生效。TinyMCE、Quill、flatpickr、Element Plus 的 el-date-picker 等，内部状态完全独立，reset 调用后它们的 UI 和数据毫无变化。
容易踩的坑：以为点了重置按钮就万事大吉，结果富文本编辑器里还留着几百字，日期选择器仍显示昨天选的日期。
- 必须在重置触发逻辑中显式调用对应 API：
editor.setContent('')、picker.clear()、datePicker.setValue(null) - 注意调用时机：不能在
form.reset()之后才清理，因为某些插件会监听 input change 并自动同步，导致刚清掉又被填回 - 推荐把第三方控件实例挂到表单元素上（如
input.dataset.editorInstance = 'xxx'），便于统一查找和清理
reset 事件监听位置错，确认弹窗就失效
想在重置前弹 confirm，很多人给 <button type="reset"></button> 绑 onclick，结果弹窗出现时重置早已完成。真正有效的拦截点是 <form></form> 上的 reset 事件，且必须在事件开始前用 event.preventDefault() 阻止默认行为。
关键细节：reset 事件不冒泡出 <form></form>，也不触发子元素的 input 或 change，所以别指望靠它触发校验或日志。
- 正确写法：
form.addEventListener('reset', e => { if (!confirm('确定清空？')) e.preventDefault(); }) - 错误写法：
<button type="reset" onclick="return confirm(...)"></button>—— 浏览器不保证 onclick 执行时机，且无法阻止已发生的重置 - 如果用了
event.preventDefault()，后续要手动调form.reset()（在用户确认后），否则表单不会还原
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
