引导者

## Vue `$once`

简介

`$once` 是 Vue.js 实例上的一个方法，用于注册一个

只执行一次

的事件监听器。当该事件触发后，监听器会自动移除，避免了手动移除监听器的麻烦，也防止了潜在的内存泄漏。这在处理一些只需要响应一次的场景，例如初始化操作、弹窗关闭后的回调等，非常有用。### 使用场景

组件初始化:

在组件挂载完成后，只需要执行一次的初始化逻辑。

单次事件响应:

例如点击按钮触发一次动画，之后不再响应点击事件。

销毁前的清理:

在组件销毁前执行一些清理工作，例如移除定时器、解绑全局事件等。

弹窗/模态框:

监听弹窗关闭事件，并在关闭后执行特定操作。### 如何使用`$once` 方法接收两个参数：1.

事件名称 (eventName):

需要监听的事件名称，例如 'click'、'scroll'、自定义事件等。 2.

回调函数 (callback):

当事件触发时执行的函数。```vue ```### 与 `$on` 的区别`$on` 用于注册一个普通的事件监听器，该监听器会持续监听事件，直到手动移除或组件销毁。而 `$once` 只会监听事件一次，触发后自动移除。### 示例：组件销毁前的清理```vue ```### 注意事项

`$once` 监听器只会在当前组件实例上生效。

如果在 `$once` 回调函数执行期间再次触发相同的事件，回调函数不会再次执行。### 总结`$once` 提供了一种简洁有效的方式来处理只需要响应一次的事件，避免了手动管理监听器，提高了代码的可读性和可维护性。 在处理初始化逻辑、单次事件响应和组件销毁前的清理工作等场景下，`$once` 是一个非常实用的工具。

Vue `$once`**简介**`$once` 是 Vue.js 实例上的一个方法，用于注册一个**只执行一次**的事件监听器。当该事件触发后，监听器会自动移除，避免了手动移除监听器的麻烦，也防止了潜在的内存泄漏。这在处理一些只需要响应一次的场景，例如初始化操作、弹窗关闭后的回调等，非常有用。

使用场景* **组件初始化:** 在组件挂载完成后，只需要执行一次的初始化逻辑。 * **单次事件响应:** 例如点击按钮触发一次动画，之后不再响应点击事件。 * **销毁前的清理:** 在组件销毁前执行一些清理工作，例如移除定时器、解绑全局事件等。 * **弹窗/模态框:** 监听弹窗关闭事件，并在关闭后执行特定操作。

如何使用`$once` 方法接收两个参数：1. **事件名称 (eventName):** 需要监听的事件名称，例如 'click'、'scroll'、自定义事件等。 2. **回调函数 (callback):** 当事件触发时执行的函数。```vue ```

与 `$on` 的区别`$on` 用于注册一个普通的事件监听器，该监听器会持续监听事件，直到手动移除或组件销毁。而 `$once` 只会监听事件一次，触发后自动移除。

示例：组件销毁前的清理```vue ```

注意事项* `$once` 监听器只会在当前组件实例上生效。 * 如果在 `$once` 回调函数执行期间再次触发相同的事件，回调函数不会再次执行。

总结`$once` 提供了一种简洁有效的方式来处理只需要响应一次的事件，避免了手动管理监听器，提高了代码的可读性和可维护性。 在处理初始化逻辑、单次事件响应和组件销毁前的清理工作等场景下，`$once` 是一个非常实用的工具。