Vue中addEventListener踩坑记录

在一次vue项目开发中,使用了postMessage, 然后在每个页面去监听了message事件,但是发现会重复发送多个请求,首先想到的就是 给window绑定了addEventListener事件,没有去移出这个事件。然后我在离开组件时调用removeEventListener移出事件, 但是发现没有生效。

错误示例

下面这样操作是不能移出message事件的

    mounted() {
        // 查看详情关闭时刷新列表
        window.addEventListener('message', (e)=> {
            if (this.mkdmFull ? e.data === this.mkdmFull : e.data === this.mkdm) {
                this.getData();
                this.mixinClearSelected();
            }
        }, false);
    },
    beforeDestroy() {
        window.removeEventListener('message', (e)=> {
            if (this.mkdmFull ? e.data === this.mkdmFull : e.data === this.mkdm) {
                this.getData();
                this.mixinClearSelected();
            }, false);
    }

后来查找到Vue中事件监听的第二个参数处理函数需要绑定到this上，并且removeEventListener 和 addEventListener 中对应的参数要一致

正确示例

mounted() {
    // 查看详情关闭时刷新列表
    window.addEventListener('message', this.listenerPostMessage, false);
},
methods: {
    listenerPostMessage() {
        if (this.mkdmFull ? e.data === this.mkdmFull : e.data === this.mkdm) {
            this.getData();
            this.mixinClearSelected();
        }
    }
},
beforeDestroy() {
    window.removeEventListener('message', this.listenerPostMessage, false);
}

这个坑还是有点坑的, 踩过一次之后就知道了!