Javascript 在Vue路由器页面之间切换会导致VueJS上发生多个事件

我正在从事一个使用Vue CLI项目和的项目。除了我最近发现的一个奇怪的bug之外，一切都很好

每当我在页面（Vue路由器）之间导航时，我从组件

mounted（）

属性侦听的事件都会变为双重事件。这实际上是

N+1

问题

为了更清楚地描述这个问题，我有两个

Home.vue

和

HelloWorld.vue

组件。从

Home.vue

组件，每当单击按钮并从同一组件

mounted（）

属性侦听

event.reply（）

时，我都会向

main

进程发送一个事件。在现阶段，这完全如预期的那样

但是，每当我转到

HelloWorld

页面并再次切换回

主页

页面，当我单击按钮从

main

进程发送和接收

事件时，我不仅看到单个
事件
，即使我只单击了一次，但我看到两个
事件
回复。如果我再次在页面之间切换，我将看到三个
事件
回复等等，比如
N+1
问题

为了您的方便，我制作了一个快速的GIF，可以清楚地显示问题


Home.vue


家
导出默认值{
姓名：“家”，
数据（）{
返回{
原因：无效
}
},
安装的（）{
on（“home:reply”，event=>console.log（event））；
},
方法：{
发送（）{
window.ipc.send（“主页”）；
}
},
};

main.js

ipcMain.on（“主”，事件=>{
返回事件。回复（“主页：回复”）；
});

我在Vue路由器上没有任何特殊功能，它只是Vue CLI附带的默认支架。正如您在上面的代码片段中所看到的，我所做的只是在单击按钮并侦听来自相同组件
mounted（）
属性的相同事件回复时发送一个事件

我还发现了堆栈溢出，但我自己也无法解决。我不知道我的代码出了什么问题当组件被销毁时，您需要注销事件处理程序，否则每次装入组件时，您都会不断地注册相同的事件处理程序

mounted（）{
window.ipcRenderer.on（'home:reply'，this.handleHomeReply）
},
销毁（）{
window.ipcRenderer.off（'home:reply'，this.handleHomeReply）
},
方法：{
handleHomeReply（事件）{
console.log（事件）
}
}
这也是为什么您应该始终为事件处理程序使用命名函数，而不是
（ev）=>{…}
样式，尽管后者在
..
位很短且简单（正如问题中所述）时非常诱人。该死，就是这样。谢谢你，伙计！我没有在任何地方找到任何关于
ipcrender.off（）
的文档，也没有真正想到它✌️