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了。