vue.once实现

Vue 的 .once 事件修饰符

在 Vue 中，.once 是一个事件修饰符，用于确保事件只触发一次。它可以直接在模板中的事件绑定上使用，无需手动移除事件监听器。

基本用法

<button @click.once="handleClick">点击我（仅触发一次）</button>

当按钮第一次被点击时，handleClick 方法会被调用，之后再次点击不会触发该方法。

实现原理

Vue 内部通过原生 addEventListener 的 once 选项或手动移除监听器实现。以下是类似功能的原生 JavaScript 实现：

element.addEventListener('click', function handler() {
  // 执行逻辑
  element.removeEventListener('click', handler);
}, { once: true });

适用场景

• 表单提交防止重复提交
• 一次性引导提示
• 初始化操作只需执行一次

注意事项

• 只能用于原生 DOM 事件或自定义事件
• 对于组件事件，需要在组件内部使用 $emit 触发
• 不能与其他修饰符冲突（如 .prevent.once 是合法的）