.once修饰符可确保事件监听器只执行一次，无需手动解绑或状态控制，适用于支付按钮、引导弹窗等场景，支持与.stop、.prevent等修饰符组合使用，且区别于this.$once()组件通信方法。
直接在事件监听器上加 .once 就能确保对应操作只执行一次，不用手动解绑、也不用额外状态控制。
基本写法：@click.once="handler"
这是最常用的方式，适用于按钮点击、表单提交等需要防重复的场景。
- 语法简洁：在
v-on（或简写@）后面加上.once即可 - 原生 DOM 事件和自定义事件都支持，比如
@submit.once、@custom-event.once - 触发后自动移除监听器，后续再触发也不会执行回调
典型使用场景
不是所有点击都需要“只一次”，但这些情况特别适合 .once：
- 支付/提交类按钮：防止用户手抖连点导致重复请求
- 引导弹窗确认：用户点“知道了”后，后续再点无效，避免干扰逻辑
- 初始化动画或提示：页面加载完成时播放一次动效，不随后续交互反复触发
- 一次性授权回调：如 OAuth 登录成功后只处理一次响应
和其他修饰符组合使用
.once 可以和 .stop、.prevent、.self 等修饰符连用，顺序不影响效果。
-
@click.stop.once：先阻止冒泡，再保证只触发一次 -
@click.once.prevent：提交表单时只处理一次，同时阻止默认刷新 -
@click.self.once：仅点击元素自身区域生效，且仅一次
注意和 $once 的区别
.once 是模板层面的语法糖，作用于 DOM 事件；而 this.$once() 是实例方法，用于监听组件自定义事件。
-
@click.once绑定的是原生 click，不需要 emit 配合 -
this.$once('event-name', callback)必须配合$emit('event-name')才能触发 - 两者目标一致（只执行一次），但适用层次不同：一个是视图层交互，一个是组件通信层
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
