VueUse 的 EventListener 怎么用？

在 Vue 开发中，事件监听是一个很常见的需求，VueUse 提供的 EventListener 能让我们更方便地处理事件监听，那 VueUse 的 EventListener 到底怎么用呢？下面我们来详细了解。

基本使用

我们需要安装 VueUse，可以通过 npm 或者 yarn 来安装，安装好后，在项目中引入 EventListener。

我们要监听窗口的 resize 事件,可以这样写：

```javascript import { useEventListener } from '@vueuse/core'

export default { setup() { const handleResize = () => { console.log('窗口大小改变了') }

useEventListener('resize', handleResize)
return {}

<p>这样，当窗口大小发生改变时，handleResize 函数就会被调用，这就是最基本的使用方式，非常简单直接。</p>
## 二、指定目标元素
<p>我们不是监听全局的事件，而是某个特定元素的事件，有一个按钮，我们要监听它的点击事件。</p>
```javascript
<template>
  <button ref="btnRef">点击我</button>
</template>
<script>
import { useEventListener } from '@vueuse/core'
import { ref } from 'vue'
export default {
  setup() {
    const btnRef = ref(null)
    const handleClick = () => {
      console.log('按钮被点击了')
    }
    useEventListener(btnRef, 'click', handleClick)
    return {
      btnRef
    }
  }
}
</script>

这里通过 ref 获取到按钮元素，然后把它作为第一个参数传给 useEventListener,就实现了对特定元素的事件监听。

事件选项

在原生的 addEventListener 中，我们可以传递一些事件选项，passive、capture 等，VueUse 的 EventListener 也支持这些选项。

```javascript useEventListener('scroll', handleScroll, { passive: true }) ```

上面的代码中，我们给 scroll 事件添加了 passive 选项，这样在处理滚动事件时，能提升性能,避免一些不必要的阻塞。

移除事件监听

当我们不需要某个事件监听时，需要手动移除，VueUse 的 EventListener 返回一个函数,调用这个函数就能移除事件监听。

```javascript import { useEventListener } from '@vueuse/core'

export default { setup() { const handleResize = () => { console.log('窗口大小改变了') }

const removeListener = useEventListener('resize', handleResize)
// 比如在某个生命周期钩子中移除
onUnmounted(() => {
  removeListener()
})
return {}

<p>在组件卸载时，调用 removeListener 函数，就可以移除对 resize 事件的监听，避免内存泄漏。</p>
## 五、多个事件监听
<p>如果我们要监听多个事件，也很简单，可以多次调用 useEventListener。</p>
```javascript
import { useEventListener } from '@vueuse/core'
export default {
  setup() {
    const handleResize = () => {
      console.log('窗口大小改变了')
    }
    const handleScroll = () => {
      console.log('页面滚动了')
    }
    useEventListener('resize', handleResize)
    useEventListener('scroll', handleScroll)
    return {}
  }
}

或者，我们可以把多个事件和对应的处理函数放在一个数组里，然后循环调用 useEventListener。

```javascript import { useEventListener } from '@vueuse/core'

export default { setup() { const events = [ { event: 'resize', handler: () => console.log('窗口大小改变了') }, { event:'scroll', handler: () => console.log('页面滚动了') } ]

events.forEach(({ event, handler }) => {
  useEventListener(event, handler)
})
return {}

<p>这样就能很方便地处理多个事件监听了。</p>
## 六、
<p>VueUse 的 EventListener 为我们在 Vue 项目中处理事件监听提供了便捷的方式，它支持基本的事件监听、指定目标元素、设置事件选项、移除事件监听以及处理多个事件监听等功能，通过合理使用它，我们能让代码更加简洁、高效，也能更好地管理事件监听，避免一些潜在的问题，比如内存泄漏，在实际的 Vue 开发中，根据具体的需求灵活运用 EventListener，能提升开发效率和代码质量。</p>