Vue 中 $once 的作用是什么？

推荐答案

$once 是 Vue 实例的一个方法，用于监听一个自定义事件，但只触发一次。一旦事件被触发，监听器就会被自动移除。

本题详细解读

1. $once 的基本用法

$once 方法允许你监听一个自定义事件，但只触发一次。它的语法如下：

vm.$once(event, callback)

• event：要监听的事件名称。
• callback：事件触发时执行的回调函数。

2. 示例代码

// www.javascriptcn.com code example
// 创建一个 Vue 实例
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    showMessage() {
      this.$emit('show-message', this.message);
    }
  }
});

// 使用 $once 监听事件
vm.$once('show-message', function(message) {
  console.log('Message:', message);
});

// 触发事件
vm.showMessage(); // 输出: Message: Hello Vue!
vm.showMessage(); // 不会输出，因为监听器已经被移除

3. 适用场景

$once 通常用于那些只需要执行一次的操作，比如在组件初始化时执行某些逻辑，或者在某个特定事件发生后执行一次性的清理工作。

4. 与 $on 的区别

• $on：监听事件，每次事件触发时都会执行回调函数。
• $once：监听事件，但只触发一次，之后自动移除监听器。

5. 注意事项

• $once 只适用于 Vue 实例或组件实例。
• 如果事件在 $once 监听之前已经被触发，那么 $once 的回调函数将不会执行。

通过使用 $once，你可以确保某些逻辑只执行一次，避免重复执行带来的问题。