.vue中用@click.once可使事件处理器只执行一次，触发后自动解绑；适用于点击、提交、键盘等事件，不阻止用户操作，仅限制当前监听器生命周期，与原生addEventListener({once:true})行为一致。

在 Vue 模板中，用 .once 修饰符就能让事件处理器只执行一次，触发后自动解绑，无需手动清理监听器。

直接在 v-on 上加 .once

这是最简单的方式，适用于点击、提交、键盘等任意原生 DOM 事件：

• <button @click.once="handleSave">保存</button> —— 点一次就生效，再点无反应
• <form @submit.once="handleSubmit">...</form> —— 表单只提交一次，防止重复提交
• <div @keydown.enter.once="triggerSearch"></div> —— 回车键只响应首次按下

注意：.once 是绑定时的“一次性”行为

它不是限制用户操作，而是限制该次事件监听器的生命周期：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 组件重新挂载（比如路由切换后回来），@click.once 会重新注册，又能触发一次
• 它不阻止用户再次点击按钮，只是这次绑定的监听器不再响应后续点击
• 和 JavaScript 原生的 addEventListener(..., { once: true }) 行为完全一致

别和 v-once 混淆

v-once 是指令，作用于元素渲染层面；.once 是事件修饰符，作用于事件监听层面：

立即学习“前端免费学习笔记（深入）”；

• <p v-once>{{ msg }}</p> → 这段文本只渲染一次，后续 msg 变化也不更新
• <button @click.once="log">点我</button> → 按钮仍可交互，但这次绑定的 click 处理器只运行一回

适合哪些场景

不需要复杂状态管理，又想防误触或重复提交时，.once 是轻量首选：

• 弹窗确认按钮（点完关闭，再点无效）
• 初始化动作（如首次加载配置、触发引导流程）
• 表单提交按钮（配合后端幂等设计更稳妥）
• 一次性快捷键响应（比如 Ctrl+R 刷新页面，不希望连按多次）