在 Vue 路由器页面之间切换会导致 VueJS 上的多个事件触发（）

Posted 2023-02-22

【中文标题】在 Vue 路由器页面之间切换会导致 VueJS 上的多个事件触发（）

【英文标题】：Switching between Vue Router pages cause multiple event fire on VueJS mounted()

【发布时间】：2020-12-05 17:36:12

【问题描述】：

我正在开发一个 Electron 项目，我使用 Vue CLI 项目和 Vue CLI Plugin Electron Builder。一切都很好，除了我最近发现的一个奇怪的错误。

每当我在页面（Vue 路由器）之间导航时，我从组件 mounted() 属性监听的事件都会变成两倍。这实际上是N+1 的问题。

为了更清楚地描述问题，我有两个Home.vue 和HelloWorld.vue 组件。从Home.vue 组件，每当单击按钮并从同一组件mounted() 属性监听event.reply() 时，我都会向main 进程发送一个事件。在这个阶段完全符合预期。

但是，每当我转到HelloWorld 页面并再次切换回Home 页面时，当我单击按钮从main 进程发送和接收event 时，我不仅看到一个event，即使我只单击一次，但我看到两个event 回复。如果我再次在页面之间切换，我会看到三个event 回复等等，比如N+1 问题。

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

Home.vue

<template>
  <div class="home">
    <button @click="send()">Home</button>
  </div>
</template>

<script>
export default 
  name: "Home",
  data() 
    return 
      cause: null
    
  ,
  mounted() 
    window.ipcRenderer.on("home:reply", event => console.log(event));
  ,
  methods: 
    send() 
      window.ipcRenderer.send("home");
    
  ,
;
</script>

main.js

ipcMain.on("home", event => 
  return event.reply("home:reply");
);

我在 Vue 路由器上没有什么特别之处，它只是 Vue CLI 附带的默认脚手架。正如您在上面的代码 sn-p 中看到的，我所做的只是在单击按钮时发送一个事件，并从同一组件 mounted() 属性监听相同的事件回复。

我还在 Stack Overflow 上找到了a similar topic，但我自己无法弄清楚。我不知道我的代码有什么问题？？？？

【参考方案1】：

当组件被销毁时，你需要取消注册事件处理程序，否则每次挂载组件时你都会一遍又一遍地注册相同的事件处理程序。

mounted() 
  window.ipcRenderer.on('home:reply', this.handleHomeReply)
,

destroyed() 
  window.ipcRenderer.off('home:reply', this.handleHomeReply)
,

methods: 
  handleHomeReply(event) 
    console.log(event)
  

【讨论】：

这也是为什么你应该总是为你的事件处理程序使用命名函数，而不是 (ev)=>... 风格，即使后者在 ... 位简短而简单时可能非常诱人（就像问题一样）。

该死的，就是这样。谢啦！我在任何地方都没有找到任何关于ipcRenderer.off() 的文件，也没有真正想到它✌️