Vue基础教程（75）事件修饰符之once：Vue事件修饰符once：给你的监听器装上“一次性纸杯”，喝了就扔！

一、 为什么你需要“一次性事件”？

想象一下这个场景：你兴冲冲点开一个抽奖按钮，连点五次后才发现——完了，系统把你五次点击都算数了！结果就是：非酋附体，颗粒无收。

又或者，某个新手引导弹窗的“关闭”按钮，用户点完后，某个全局事件监听器还在后台默默工作，导致页面卡成PPT...

这些尴尬的根源，都是因为事件监听器太“长情”！它们一旦绑定，就会执着地监听每一次触发，直到组件销毁。但现实中，太多场景里我们只希望事件生效一次：

• 表单提交防止重复点击
• 用户引导弹窗关闭后自动解绑
• 页面初始化时的一次性动画
• 授权弹窗的确认操作

手动移除？当然可以！但你要写额外的代码，还要找准移除时机... 累不累啊？

Vue早就看穿了这一切，默默献上神器：事件修饰符.once。它就像给事件监听器装上了“自毁装置”，触发一次后自动销毁，优雅又高效！

---

二、 .once修饰符：原来是“语法糖本甜”！

1. 基础用法：简单到犯规

普通的事件监听长这样：

<button @click="handleClick">点我试试</button>

而加了.once后：

<button @click.once="handleClick">这辈子只能点我一次！</button>

没错，只是多加了个.once后缀！当用户第一次点击按钮时，handleClick方法会正常执行。但从第二次开始，这个点击事件就会直接“扑街”——监听器自动消失，点击无效！

2. 底层原理：Vue帮你做了“脏活”

好奇Vue是怎么实现的？其实原理很简单：

// Vue在背后悄悄做了类似这样的操作
const originalHandler = function() {
  // 执行你的方法
  handleClick()
  // 然后立即移除监听器！
  target.removeEventListener('click', originalHandler)
}

也就是说，Vue在第一次触发事件后，自动帮你移除了事件监听，省去了你手动管理的麻烦。这就是为什么我们说它是“语法糖”——甜在嘴里，暖在心里！

3. 组合使用：和其他修饰符“组CP”

.once还可以和其他事件修饰符一起使用，顺序不重要：