使用Vue的手套库和Webpack热重装会引起问题吗？

Question

在我的Vue3应用程序中，我使用mitt事件总线库在组件之间发出和接收事件。

我将其放在需要刷新的列表组件的onMounted中：

  mitt.on("list_refresh", (evt) => {
    refresh();
  });

在另一个包含列表组件作为子组件(或孙辈)的组件中，我使用一种方法执行此操作：

  mitt.emit("list_refresh", {});

这是可行的，但在使用hot-reload进行开发时，事件似乎是多次发出的，好像每次应用程序重新加载时都会额外创建这些事件，而不是覆盖旧的事件。当我在浏览器中重新加载整个页面时，它再次正常工作。

有什么办法阻止这件事吗？

Answer 1

您的组件似乎缺少相应的off() call来删除事件侦听器。在热重新加载期间，当前组件实例卸载，新组件实例挂载；因此，如果不删除当前事件侦听器，则只需堆入新的事件侦听器即可。若要解决此问题，请在组件从DOM中删除时使用onUnmounted hook删除事件侦听器。

此外，确保将缓存的函数引用(而不是内联函数)传递给mitt.on()和mitt.off()，以确保给定的事件侦听器查找在mitt.off()中成功。

// mitt.on('list_refresh', () => refresh()) ❌

mitt.on('list_refresh', refresh) ✅
mitt.off('list_refresh', refresh)

您的setup()应该类似于以下内容：

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const refresh = () => { /*...*/ }

    onMounted(() => mitt.on('list_refresh', refresh))
    onUnmounted(() => mitt.off('list_refresh', refresh)) 
  }
}