vue3 组件销毁 注销监听事件

在Vue3中，组件销毁时也需要注销监听事件以避免内存泄漏。可以使用`onUnmounted()`函数来实现，在这个函数中可以使用`removeEventListener()`或`off()`等方法来注销之前添加的监听事件。具体实现方式取决于使用的监听函数的类型和添加监听的方式。例如，你可以在组件中这样使用`onUnmounted()`函数：

import { onUnmounted } from 'vue'

export default {
  setup() {
    const handleClick = () => {
      console.log('click')
    }

    const addListener = () => {
      document.addEventListener('click', handleClick)
    }

    const removeListener = () => {
      document.removeEventListener('click', handleClick)
    }

    onUnmounted(() => {
      removeListener()
    })

    return {
      addListener,
      removeListener
    }
  }
}

在这个例子中，我们在组件的`setup()`函数中定义了一个`handleClick()`函数，并在`addListener()`函数中将其添加为`click`事件的监听函数。然后，在组件销毁时使用`onUnmounted()`函数来注销这个监听函数。