VueUse Listener，提升Vue应用交互体验的利器

在Vue开发中,我们常常需要处理各种事件监听，VueUse提供的@vueuse/core中的useEventListener等工具函数，为我们带来了极大的便利，那VueUse Listener到底是什么？它有哪些优势？又该如何使用呢？

VueUse Listener是什么？

VueUse是一个基于Vue Composition API的实用工具库，其中的Listener相关功能（如useEventListener），它可以帮助开发者更方便、简洁地在Vue组件中进行事件监听，它是一种更优雅的事件监听解决方案，替代了传统的在模板中直接绑定事件或者在mounted等生命周期钩子中手动添加事件监听然后在beforeUnmount中移除的繁琐操作。

VueUse Listener的优势

简洁性

传统方式下,比如监听窗口的resize事件，我们可能会这样写：

<template>
  <div>页面内容</div>
</template>
<script>
export default {
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      // 处理逻辑
    }
  }
}
</script>

而使用useEventListener则可以简化为：

<template>
  <div>页面内容</div>
</template>
<script setup>
import { useEventListener } from '@vueuse/core'
const handleResize = () => {
  // 处理逻辑
}
useEventListener(window,'resize', handleResize)
</script>

代码量明显减少,逻辑也更加清晰，不需要再手动管理事件的添加和移除，useEventListener会自动处理这些生命周期相关的操作。

灵活性

它不仅可以监听DOM元素的事件,还能监听各种全局对象（如window、document等）的事件，比如监听document的keydown事件：

<template>
  <div>页面内容</div>
</template>
<script setup>
import { useEventListener } from '@vueuse/core'
const handleKeydown = (event) => {
  if (event.key === 'Enter') {
    // 处理回车键按下逻辑
  }
}
useEventListener(document, 'keydown', handleKeydown)
</script>

而且还支持传递options参数，像{ passive: true }（用于优化滚动事件性能）等，满足不同场景下的事件监听需求。

响应式支持

在一些复杂场景中,我们可能需要根据响应式数据来动态地添加或移除事件监听。useEventListener同样可以很好地支持，有一个响应式的布尔值isListening，当它为true时监听事件，为false时停止监听：

<template>
  <div>
    <button @click="isListening =!isListening">{{ isListening? '停止监听' : '开始监听' }}</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useEventListener } from '@vueuse/core'
const isListening = ref(false)
const handleClick = () => {
  // 事件处理逻辑
}
useEventListener(window, 'click', handleClick, {
  enabled: isListening
})
</script>

通过enabled选项，轻松实现了基于响应式数据的事件监听控制。

VueUse Listener的使用方法

基本使用

确保项目中安装了@vueuse/core：

npm install @vueuse/core
# 或者
yarn add @vueuse/core

然后在Vue组件中引入并使用：

<template>
  <div>
    <p>点击按钮触发事件</p>
    <button ref="btnRef">点击我</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useEventListener } from '@vueuse/core'
const btnRef = ref(null)
const handleClick = () => {
  console.log('按钮被点击了')
}
useEventListener(btnRef, 'click', handleClick)
</script>

这里通过ref获取DOM元素（按钮），然后使用useEventListener监听其click事件。

监听多个事件

有时候我们需要监听一个元素的多个事件,useEventListener也能轻松实现，比如监听按钮的click和mouseover事件：

<template>
  <div>
    <p>鼠标操作按钮触发事件</p>
    <button ref="btnRef">操作我</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useEventListener } from '@vueuse/core'
const btnRef = ref(null)
const handleClick = () => {
  console.log('按钮被点击了')
}
const handleMouseover = () => {
  console.log('鼠标悬停在按钮上了')
}
useEventListener(btnRef, ['click','mouseover'], [handleClick, handleMouseover])
</script>

通过传递事件名称数组和对应的处理函数数组来实现多事件监听。

自定义事件（在Vue组件间通信场景）

在Vue中,我们可以通过自定义事件进行组件间通信，结合useEventListener也能更方便地处理，比如父组件和子组件之间： 子组件（Child.vue）：

<template>
  <button @click="emitCustomEvent">触发自定义事件</button>
</template>
<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['custom-event'])
const emitCustomEvent = () => {
  emit('custom-event', '这是传递的数据')
}
</script>

父组件（Parent.vue）：

<template>
  <Child />
</template>
<script setup>
import Child from './Child.vue'
import { useEventListener } from '@vueuse/core'
const handleCustomEvent = (data) => {
  console.log('接收到子组件传递的数据：', data)
}
useEventListener(Child, 'custom-event', handleCustomEvent)
</script>

这里通过useEventListener监听子组件触发的自定义事件，实现了更简洁的组件间通信事件处理。

注意事项

元素引用的时机

当监听DOM元素事件时,如果元素是通过异步加载（比如v-if控制的元素，在初始渲染时不存在），要确保在元素实际存在后再进行事件监听，可以结合onMounted等生命周期钩子（在setup中使用onMounted需从vue中引入）：

<template>
  <div v-if="showElement" ref="elementRef">要监听的元素</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useEventListener } from '@vueuse/core'
const showElement = ref(false)
const elementRef = ref(null)
const handleEvent = () => {
  // 事件处理
}
onMounted(() => {
  showElement.value = true
  useEventListener(elementRef, 'click', handleEvent)
})
</script>

性能考虑

虽然useEventListener简化了事件监听操作，但对于一些高频触发的事件（如scroll、resize等），还是要注意优化，可以结合防抖（useDebounceFn也是VueUse提供的工具函数）等技术来减少事件处理函数的执行频率：

<template>
  <div>页面内容</div>
</template>
<script setup>
import { useEventListener, useDebounceFn } from '@vueuse/core'
const handleResize = useDebounceFn(() => {
  // 处理窗口resize逻辑（防抖处理）
}, 300)
useEventListener(window,'resize', handleResize)
</script>

VueUse Listener（以useEventListener为代表）为Vue开发者提供了一种高效、简洁且灵活的事件监听解决方案，无论是简单的DOM元素事件，还是复杂的全局对象事件、组件间自定义事件，它都能很好地应对，合理运用它，能让我们的Vue应用在交互体验上更上一层楼，同时也能使代码更加整洁、易维护，随着Vue项目的不断发展和复杂场景的增多，熟练掌握VueUse Listener相关功能，必将成为Vue开发者的一项重要技能。