Vue：未删除 beforeunload 事件侦听器答案

【问题标题】：Vue: beforeunload event listener is not being removedVue：未删除 beforeunload 事件侦听器
【发布时间】：2020-04-02 21:58:54
【问题描述】：

我正在开发撤消删除功能，它由一个小模式组成，允许用户在有限的时间内撤消/延迟操作（类似于 gmail）。但是，如果用户决定导航到另一个窗口或关闭选项卡，我想确保执行该操作，我正在这样做：

mounted() {
  this.timeout = setTimeout(() => {
    this.close(true);
  }, this.duration);
  window.addEventListener('beforeunload', this.forceDestroyHandler, { capture: true });
},
methods: {
  close(deleteBeforeClosing) {
    if (deleteBeforeClosing) {
      clearTimeout(this.timeout);
      // This is the function dispatching to the store and deleting the item
      this.destructiveEvent(this.category, this.item.id);
    }
    this.$emit('close');
}

然后我（尝试）删除 beforeDestroy 上的事件侦听器：

beforeDestroy() {
  this.forceDestroy();
  window.removeEventListener('beforeunload', this.forceDestroyHandler, {capture: true});
},

但是，似乎从未调用 beforeDestroy，这意味着永远不会删除事件侦听器 - 因此，如果用户决定关闭选项卡或导航，则会提示他一条消息，即使撤消组件甚至不再显示。如果用户单击取消，则会向商店发送另一个操作，尝试删除已删除的项目，从而导致服务器错误。

我也尝试将removeEventListener 放在其他地方，但我一直遇到同样的问题。

【问题讨论】：

你为什么在 beforeDestroy 中调用forceDestroy？
forceDestroy 可能不是最好的名称，但它只是关闭模式并执行删除：forceDestroy() { return this.timeout !== 0 ? this.close(true) : null; },
当您关闭选项卡/窗口时，组件上的beforeDestroy() 生命周期钩子永远不会被调用，因为您不是在破坏组件，而是整个选项卡窗口。
反转beforeDestroy中的函数顺序
@ 有道理！但即使我在close() 中removeEventListener 它也没有被正确删除？

标签： vue.js event-listener removeeventlistener

【解决方案1】：

进一步详细说明我的评论：onbeforeunload 事件侦听器未绑定的原因是因为 beforeDestroy() 生命周期挂钩仅在 VueJS 组件被销毁时触发。当您关闭浏览器选项卡/窗口时，会擦除整个线程，这不会触发组件销毁。

由于您只想在模式关闭后删除侦听器，因此在 close() 方法中执行此操作是有意义的：因此您的方法有效。

【讨论】：