面试题：将 EventBus 注册为 Vue 实例的全局对象，路由切换时会重复触发事件，如何解决？

在使用 EventBus 进行全局事件通信时，如果路由切换时事件重复触发，通常是因为事件监听器没有被正确销毁。以下是解决这个问题的几种方法：

1. 在组件销毁时移除事件监听器

在 Vue 组件中，可以在 beforeDestroy 或 beforeUnmount 生命周期钩子中移除事件监听器，避免重复触发。

示例

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 组件 A
import { EventBus } from './EventBus';

export default {
  mounted() {
    EventBus.$on('custom-event', this.handleEvent);
  },
  beforeDestroy() {
    EventBus.$off('custom-event', this.handleEvent);
  },
  methods: {
    handleEvent(payload) {
      console.log('事件触发:', payload);
    },
  },
};

EventBus.$on：监听事件。
EventBus.$off：移除事件监听器。

2. 使用 `once` 方法监听一次性事件

如果某个事件只需要触发一次，可以使用 EventBus.$once 方法，事件触发后会自动移除监听器。

示例

export default {
  mounted() {
    EventBus.$once('custom-event', this.handleEvent);
  },
  methods: {
    handleEvent(payload) {
      console.log('事件触发:', payload);
    },
  },
};

3. 在路由守卫中统一管理事件

如果事件监听器需要在多个组件中使用，可以在全局路由守卫中统一管理事件的注册和移除。

示例

import { EventBus } from './EventBus';

router.beforeEach((to, from, next) => {
  // 移除之前的路由事件监听器
  EventBus.$off('custom-event');
  // 注册新的事件监听器
  EventBus.$on('custom-event', (payload) => {
    console.log('事件触发:', payload);
  });
  next();
});

4. 使用 Vuex 替代 EventBus

对于复杂的全局状态管理，建议使用 Vuex 替代 EventBus。Vuex 提供了更强大的状态管理能力，并且不会出现事件重复触发的问题。

示例

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    message: '',
  },
  mutations: {
    setMessage(state, payload) {
      state.message = payload;
    },
  },
  actions: {
    updateMessage({ commit }, payload) {
      commit('setMessage', payload);
    },
  },
});

// 组件 A
export default {
  computed: {
    message() {
      return this.$store.state.message;
    },
  },
  methods: {
    updateMessage() {
      this.$store.dispatch('updateMessage', 'Hello, Vuex!');
    },
  },
};

5. 使用 `watch` 监听 EventBus 事件

如果事件监听器需要在组件中动态管理，可以使用 watch 监听 EventBus 的事件。

示例

export default {
  data() {
    return {
      eventPayload: null,
    };
  },
  watch: {
    eventPayload(newVal) {
      if (newVal) {
        console.log('事件触发:', newVal);
      }
    },
  },
  mounted() {
    EventBus.$on('custom-event', (payload) => {
      this.eventPayload = payload;
    });
  },
  beforeDestroy() {
    EventBus.$off('custom-event');
  },
};

总结

方法	适用场景	说明
组件销毁时移除监听器	组件级别的事件管理	在 `beforeDestroy` 或 `beforeUnmount` 中移除监听器
使用 `once` 方法	一次性事件	事件触发后自动移除监听器
在路由守卫中管理事件	全局事件管理	统一管理事件的注册和移除
使用 Vuex 替代 EventBus	复杂全局状态管理	避免事件重复触发，提供更强大的状态管理
使用 `watch` 监听事件	动态管理事件	结合 `watch` 监听事件变化