如何在 Vue 中删除事件？

Question

在我的 Vue 实例上，我有这个：

async mounted () {
  document.addEventListener('paste', this.onPasteEvent)
},
beforeDestroy () {
  document.removeEventListener('paste', this.onPasteEvent)
},
methods: {
  onPasteEvent () {
    return async (event) => {
      try {
        const items = event.clipboardData.items
        const files = await this.getBase64Files(items)

        this.transferedItems = files
        this.modal = true
      } catch (error) {
        this.$toast.error('Não foi possível detectar um arquivo na área de transferência.')
      }
    }
  },

我试图在组件被销毁时销毁“粘贴”事件，但这不起作用，我知道我需要将相同的引用传递给removeEventListener，但这不是相同的引用吗？

我发现完成这项工作的唯一方法是将onPasteEvent 方法作为constant 放在Vue 实例之外，但这样我就无法访问this 实例，这对我来说很重要，另外，我不能将任何东西作为参数传递，如果我尝试传递一些东西，看起来我的函数会在内存上创建一个新引用，从而无法使用 removeEventListener 销毁它。

拜托，我只是不明白如何在 JavaScript 中删除事件，有人可以帮我举个例子吗？我已经看到很多类似的问题，但没有人解释：

• 即使有参数，如何保留方法引用？
• 如何移除使用 Vue 实例的事件？

Answer 1

您的代码已经正确删除了事件侦听器，但还有一些其他问题：

onPasteEvent 返回一个函数，所以当paste 事件发生时，handler 只返回一个新函数（不会被执行），所以它基本上没什么用处。

要修复paste 事件处理程序，请将返回的函数转换为onPasteEvent 函数本身：

export default {
  methods: {
    async onPasteEvent (event) {
      try {
        const items = event.clipboardData.items
        const files = await this.getBase64Files(items)

        this.transferedItems = files
        this.modal = true
      } catch (error) {
        this.$toast.error('Não foi possível detectar um arquivo na área de transferência.')
      }
    }
  }
}

如果您使用的是 Vue 3，则 Vue 2 中的 beforeDestroy 钩子是 renamed to beforeUnmount：

export default {
  // beforeDestroy() { ❌ renamed in Vue 3

  beforeUnmount() { ✅
    document.removeEventListener('paste', this.onPasteEvent)
  },
}

demo