javascript - 如何防止 Vue Js 组件中事件监听器的多次调用？

Question

我正在像这样在事件监听器上调用特定函数。

mounted() {
    window.addEventListener("message", this.call);   },

methods: {
    call(e){
       if (e.data === "test"){
          this.call2()
       }
    }
    call2(){
       console.log("called call2")
    }
}

第一次尝试时，call2 被调用一次。但是在第二次尝试时，call2 被调用了两次，并且会在控制台上显示两次“called call2”。等等。对于每次尝试，它只会增加 call2 在单个操作中被调用的次数。有什么办法可以避免这种情况吗？

Answer 1

始终在 beforeDestroy 生命周期 Hook 中删除事件监听器，以防止监听器泄漏。

//Add the event listener
mounted() {
    window.addEventListener("message", this.call);   
},

//Remove the event listener
beforeDestroy() {
    window.removeEventListener("message", this.call);   
},

查看 Vue 生命周期以供引用: