Vue3 Setup Vite 中使用 addEventListener 的最佳实践

在 Vue 3 和 Vite 中，你可以使用 'onMounted' 生命周期钩子来注册 'addEventListener'。

首先，确保你已经安装了 Vue 3 和 Vite，并且创建了一个 Vue 组件。

然后，在组件中引入 'onMounted' 生命周期钩子：

import { onMounted } from 'vue'

接下来，在组件的 'setup' 函数中使用 'onMounted' 生命周期钩子来注册 'addEventListener'：

setup() {
  onMounted(() => {
    window.addEventListener('click', handleClick)
  })

  const handleClick = () => {
    console.log('Clicked!')
  }
}

在上面的例子中，我们在组件挂载后注册了一个 'click' 事件监听器，并定义了一个 'handleClick' 函数来处理点击事件。

请注意，'onMounted' 生命周期钩子是一个异步函数，因此你可以在其内部执行任何异步操作。

最后，不要忘记在组件销毁前注销事件监听器。你可以使用 'onBeforeUnmount' 生命周期钩子来完成这项工作：

import { onMounted, onBeforeUnmount } from 'vue'

setup() {
  onMounted(() => {
    window.addEventListener('click', handleClick)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('click', handleClick)
  })

  const handleClick = () => {
    console.log('Clicked!')
  }
}

在上面的例子中，我们使用 'onBeforeUnmount' 生命周期钩子来注销 'click' 事件监听器。

这样，你就可以在 Vue 3 和 Vite 中使用 'addEventListener' 和 'removeEventListener' 了。