vue.once实现

Vue.once 的实现原理

Vue.once 是 Vue.js 中的一个修饰符，用于确保事件只触发一次。它的实现基于 Vue 的事件系统和 JavaScript 的原生事件处理机制。

使用方式

在模板中使用 .once 修饰符：

<button @click.once="handleClick">Click me</button>

在 JavaScript 中手动添加 once 事件监听：

vm.$once('event-name', callback)

实现机制

Vue.once 的实现主要依赖于以下技术点：

事件监听器的自动移除：当事件触发一次后，Vue 会自动移除该监听器，确保不会再次触发。

Vue 源码中的相关实现：

function createOnceHandler (event, fn) {
  const _target = target
  return function onceHandler () {
    const res = fn.apply(null, arguments)
    if (res !== null) {
      _target.$off(event, onceHandler)
    }
  }
}

手动实现类似功能

如果不使用 Vue 的 .once 修饰符，可以手动实现类似功能：

let hasFired = false
function handleOnce() {
  if (!hasFired) {
    // 执行一次性的操作
    hasFired = true
  }
}

注意事项

.once 修饰符只能用于组件和DOM元素的自定义事件 对于原生DOM事件，Vue会将其转换为原生addEventListener的once选项 在Vue 3中，.once的行为与Vue 2保持一致，但实现细节有所不同