@click.once适用于新增记录、支付、发短信等不可逆或非幂等操作，语法为@事件.once="方法"，它静默移除事件监听器，需配合loading状态和后端幂等设计。
直接用 @click.once 就能让按钮点击后只提交一次请求，适合表单提交、新增数据等关键操作，避免因网络延迟或用户手快重复点击导致重复提交。
什么时候该用 .once
适用于那些「执行后状态不可逆」或「后端不幂等」的操作，比如：
- 新增一条数据库记录（重复点会多插几条）
- 发起支付请求（重复调用可能扣多次款）
- 触发发送短信/邮件（用户不该收到两份验证码）
- 页面级初始化动作（如首次加载配置，不需要反复执行）
怎么写才生效
语法很简单，把 .once 加在事件指令末尾即可：
<button>提交</button>
注意：它绑定的是 DOM 事件本身，不是函数逻辑。也就是说，第一次点击时 submitForm 会执行；之后哪怕函数内部没做任何限制，这个按钮的 click 事件监听器也已被 Vue 自动移除，不会再触发。
它和 disabled 的区别在于：.once 不改变按钮外观，只是“静默失效”；而 disabled 会让按钮变灰、禁用交互，体验更明确——两者可结合使用，推荐后者为主。
实际提交中建议搭配的状态反馈
单靠 .once 虽能防重复，但用户可能不知道已提交成功或失败。推荐组合使用：
- 点击前设
loading = true，按钮加:disabled="loading"和文字提示（如“提交中…”） - 请求完成后无论成功失败都重置
loading = false，方便用户二次操作（如果允许） - 若业务上「绝对不允许重试」，再叠加
@click.once双保险
例如：
<button :disabled="loading">
{{ loading ? '提交中...' : '提交' }}
</button>
它不能替代后端幂等设计
.once 是纯前端防护，仅防止同一页面内重复触发。如果用户刷新页面、新开标签页、或绕过前端直接调接口，依然可能重复提交。所以：
- 前端用
.once或loading + disabled提升体验 - 后端必须做幂等控制（如用唯一请求 ID、token 校验、数据库唯一索引等）
- 前后端配合才是完整方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
