Vue 라우터 페이지 사이를 전환하면 VueJS에서 다중 이벤트가 발생합니다 ()

Aug 16 2020

저는 Vue CLI 프로젝트와 Vue CLI 플러그인 Electron Builder를 사용 하는 Electron 프로젝트에서 일하고 있습니다. 최근에 발견 한 이상한 버그를 제외하고 모든 것이 잘 작동합니다.

페이지 (Vue Router)를 탐색 할 때마다 구성 요소 mounted()속성 에서 수신하는 이벤트 가 두 배가됩니다. 실제로 N+1문제입니다.

더 명확하게 문제를 설명하기 위해, 저는 두가 Home.vueHelloWorld.vue구성 요소를. 에서 Home.vue구성 요소, 나는에 이벤트를 보낸다 main버튼을 클릭하고 청취 할 때마다 처리 event.reply()같은 구성 요소에서 mounted()속성입니다. 이 단계에서는 완전히 예상대로입니다.

하지만 HelloWorld페이지 로 이동하여 다시 페이지로 전환 할 때마다 Home버튼을 클릭 event하여 main프로세스 에서 송수신을하면 event한 번만 클릭해도 하나만 보이지 않고 event답글이 두 개 보입니다. . 페이지를 다시 전환하면 3 개의 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와 함께 제공되는 기본 스캐 폴딩입니다. 위의 코드 스 니펫에서 볼 수 있듯이 버튼을 클릭하고 동일한 구성 요소 mounted()속성 에서 동일한 이벤트 응답을 수신 할 때 이벤트를 보내는 것뿐입니다 .

Stack Overflow 에서도 비슷한 주제 를 찾았 지만 직접 알아낼 수 없었습니다. 내 코드에 무엇이 잘못되었는지 전혀 모르겠습니다 🥱

답변

2 DecadeMoon Aug 16 2020 at 19:56

구성 요소가 소멸 될 때 이벤트 처리기를 등록 취소해야합니다. 그렇지 않으면 구성 요소가 마운트 될 때마다 동일한 이벤트 처리기를 계속 등록하면됩니다.

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

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

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