点击“退出”按钮需设type="button"并监听input事件设脏标记，beforeunload中提示；保存时禁用按钮并服务端幂等处理；自动保存仅适用于无业务状态依赖场景。
点击“退出”时如何阻止表单自动提交
浏览器默认行为是：表单内任意 <button></button> 或 <input type="submit"> 都会触发表单提交，哪怕你只想关掉页面。关键不是禁用按钮，而是明确告诉浏览器“这个按钮不提交”。
- 给退出按钮加
type="button"（不是submit或缺省） - 确保它不在
<form></form>内部，或即使在内部也显式声明type="button" - 如果用了 JavaScript 绑定
click事件，不要漏掉event.preventDefault()—— 尤其当按钮是type="submit"但你想拦截时
用户改了内容但没点保存，怎么提示别误关
核心是监听输入变化，设置一个脏标记（isDirty），再在页面卸载前检查。不能只靠 beforeunload，因为现代浏览器对弹窗限制严格，且仅支持简单字符串提示。
- 用
addEventListener('input', () => isDirty = true)监听所有<input>、<textarea></textarea>、<select></select> - 保存成功后重置
isDirty = false window.addEventListener('beforeunload', e => { if (isDirty) e.returnValue = '确定要离开？未保存的修改将丢失'; })- 注意：
beforeunload提示文案无法自定义，浏览器会统一覆盖为标准提示语
保存失败时怎样避免用户重复点击提交
网络延迟或后端错误会导致用户误以为没点上，狂点“保存”按钮，结果发出去多个请求。必须从 UI 和逻辑两层锁住。
- 点击保存后立即禁用按钮：
saveBtn.disabled = true，并可临时改文字为“保存中…” - 请求完成（无论成功失败）再恢复：
saveBtn.disabled = false - 服务端也要做幂等处理（比如用
idempotency-key请求头），不能只靠前端防抖 - 避免用
setTimeout模拟“等待”，应以真实 Promise 状态为准
退出前要不要自动保存？取决于场景
自动保存不是万能解法。它可能掩盖数据冲突、触发意外副作用（如草稿发布、状态变更），反而比丢数据更糟。
- 适合场景：
textarea编辑器、表单草稿、配置项微调（无业务状态依赖） - 不适合场景：订单确认页、审批流程、含校验规则的多字段联动表单
- 若真要自动保存，建议用
localStorage存当前字段值（键名用 URL + 表单 ID），退出时不发请求，仅本地暂存 - 下次进入时检测是否有本地缓存，再弹框问用户：“检测到未完成的编辑，是否恢复？”
真正难的不是写保存逻辑，而是判断什么时候不该保存——业务语义永远比技术实现更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
