在 Vue 中使用带有 Webpack 热重载的 mitt-library 会导致问题吗？

Question

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

我把它放在需要刷新的列表组件的 onMounted 中：

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

在另一个包含列表组件作为子（或孙）组件的组件中，我在一个方法中执行此操作：

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

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

有什么办法可以防止这种情况发生吗？

Answer 1

您的组件似乎缺少相应的 off() call to remove the event listener. During hot reload, the current component instances unmount, and new ones mount; so if you're not removing current event listeners, you'll just pile on new event listeners. To resolve the issue, use the onUnmounted hook 以在组件从 DOM 中删除时删除事件侦听器。

此外，确保将 缓存函数引用 （而不是内联函数）传递给 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)) 
  }
}

在 Vue 中使用带有 Webpack 热重载的 mitt-library 会导致问题吗？

Using the mitt-library in Vue with Webpack hot-reload causes problems?

eventemitter

vue.js

vuejs3