vue.once实现
vue.once 的实现方法
在 Vue.js 中，.once 是一个事件修饰符，用于确保事件监听器仅触发一次。以下是实现 .once 功能的几种方法：
使用事件修饰符
在模板中直接使用 .once 修饰符，这是最简单的方式：
<button @click.once="handleClick">Click me</button>手动实现 once 功能 如果不使用修饰符，可以通过在事件处理函数中移除事件监听器来实现：
methods: {
handleClick() {
console.log('This will only log once');
this.$off('click', this.handleClick);
}
}使用 $once 方法
Vue 实例提供了 $once 方法，用于监听一个自定义事件，但只触发一次：
mounted() {
this.$once('hook:beforeDestroy', () => {
console.log('This will only run once before destroy');
});
}自定义指令实现
可以创建一个自定义指令来模拟 .once 的功能：
Vue.directive('on-once', {
bind(el, binding, vnode) {
const event = binding.arg;
const handler = binding.value;
let fired = false;
el.addEventListener(event, function() {
if (!fired) {
fired = true;
handler.apply(vnode.context, arguments);
}
});
}
});使用方式：
<button v-on-once:click="handleClick">Click once</button>注意事项
.once修饰符仅适用于 Vue 的模板事件绑定- 手动实现时需要注意事件解绑的时机，避免内存泄漏
- 自定义指令方式提供了更大的灵活性，但需要更多代码
