在Vue中，如何保证事件监听器的注册和清除操作在正确的生命周期执行？

在 Vue 中，你可以使用 mounted 生命周期钩子来注册事件监听器，并在 destroyed 生命周期钩子中清除事件监听器。这是因为 mounted 钩子在组件被挂载到 DOM 后被调用，此时你可以操作和访问 DOM 元素；而 destroyed 钩子在组件被销毁后被调用，此时所有的事件监听器会被移除。

以下是一个示例：

<template>
  <input type="text" @input="onInput">
</template>

<script>
export default {
    
  methods: {
    
    onInput(event) {
    
      console.log(event.target.value);
    }
  },
  // 在mounted生命周期中注册监听器
  mounted() {
    
    this.$on('input', this.onInput);
  },
  // 在destroyed生命周期中清除监听器
  destroyed() {
    
    this.$off('input', this.onInput);
  }
}
</script>

在上面的示例中，我们使用 @input 指令来监听输入事件，并在 mounted 钩子中注册 onInput 方法作为事件监听器。当输入事件发生时，onInput 方法会被调用，并打印输入框的值。同时，我们在 destroyed 钩子中使用 $off 方法来清除 input 事件的监听器，以避免内存泄漏。