时间戳

首页 > 解决方案 > 我应该担心由于不删除事件处理程序而导致的内存泄漏吗？

vuejs2 - 我应该担心由于不删除事件处理程序而导致的内存泄漏吗？

问题描述

我最近不得不将事件处理程序添加到vuetify对话框的叠加层并且它可以工作。

打开/关闭对话框由一个布尔变量控制dialog：

<v-dialog v-model="dialog">
  <MyComponent v-if="dialog" />
</v-dialog>

以及一些添加/删除处理程序的代码：

    openDialog() {
      this.dialog = true
      setTimeout(() => {
        const overlay = document.querySelector('.v-overlay--active .v-overlay__scrim')
        if (overlay) {
          overlay.addEventListener('my-event', this.myEventHandler)
        }
      }, 100)
    },
    closeDialog() {
      const overlay = document.querySelector('.v-overlay--active .v-overlay__scrim')
      if (overlay) {
        overlay.removeEventListener('my-event', this.myEventHandler)
      }
      this.dialog = false
    },

我担心的是，closeDialog并不总是被调用（例如在对话框外单击时），在这种情况下我是否需要担心内存泄漏？

对话框覆盖似乎被vuetify库插入/删除，我不确定这些更改是否会造成麻烦。

标签： vuejs2memory-leaksdom-eventsvuetify.js

解决方案

我的问题非常vuetify具体。我不知道click:outside可用于的事件的存在v-dialog。此外，我必须使对话框持久化并处理 keyup 事件esc以关闭对话框：

// @keyup.esc="handleEsc" somewhere close to top
<v-dialog v-model="dialog" persistent @click:outside="closeDialog">
  <MyComponent v-if="dialog" />
</v-dialog>

所以现在我明确地处理所有事件以关闭对话框并确信无需担心内存泄漏。

推荐阅读