useEventListener 是 VueUse 库提供的一个自定义 Hook，用于在 Vue 组件中添加和管理事件监听器。
在 Web 应用程序中，我们经常需要对不同的事件做出响应，例如点击事件、键盘事件、滚动事件等。useEventListener 可以简化事件监听的过程，并提供方便的方式来添加、更新和移除事件监听器。
使用 useEventListener 需要在 Vue 组件的 setup 函数中调用它，并传递相应的参数，包括要监听的事件类型、处理函数以及其他选项。
以下是一个示例，演示如何使用 useEventListener 监听点击事件：
<template>
<button ref="button">Click Me</button>
</template>
<script>
import { useEventListener } from '@vueuse/core';
export default {
setup() {
const buttonRef = ref(null);
// 添加点击事件监听器
useEventListener(buttonRef, 'click', handleClick);
function handleClick() {
console.log('Button Clicked!');
}
return {
buttonRef,
};
},
};
</script>
在上述示例中，我们使用 ref 创建了一个对按钮元素的引用 buttonRef。然后，我们调用 useEventListener，传递 buttonRef、事件类型 'click' 和处理函数 handleClick。
这样，当用户点击按钮时，事件处理函数 handleClick 将被触发，并打印出 'Button Clicked!'。
当调用 useEventListener 并将其返回值赋给一个变量时，也可以随时调用该变量所引用的函数来取消注册之前添加的事件监听器。
<template>
<button ref="button">Click Me</button>
</template>
<script>
import { useEventListener } from '@vueuse/core';
export default {
setup() {
const buttonRef = ref(null);
let unregisterListener;
// 添加点击事件监听器
useEventListener(buttonRef, 'click', handleClick);
function handleClick() {
console.log('Button Clicked!');
// 在特定条件下停止监听点击事件
if (shouldStopListening) {
unregisterListener();
}
}
// 保存返回的取消注册函数
unregisterListener = useEventListener(buttonRef, 'mouseover', handleMouseOver);
function handleMouseOver() {
console.log('Button Mouse Over');
}
return {
buttonRef,
};
},
};
</script>
如果组件在服务器端渲染（SSR）环境下运行，由于 Node.js 中没有可用的 DOM API（如 document 和 window），你可能会遇到错误（比如 document is not defined）。为了避免这种情况，可以将相关逻辑放在 onMounted 生命周期钩子函数中。
源码分析
useEventListener 函数接受一系列参数来指定要添加事件监听器的目标元素、事件名称、监听器函数以及其他选项。具体作用如下：
具体来说，这段代码的作用如下：
- 它首先根据传入的参数确定要添加事件监听器的目标元素、要监听的事件名称、监听器函数以及其他选项。
- 如果没有传入目标元素，则默认使用
defaultWindow，即全局的window对象。 - 确保事件名称和监听器函数都是数组形式，即使只传入单个事件或监听器，也会转换为数组。
- 创建一个
cleanup函数和一个cleanups数组，用于存储事件监听器的清理函数。 - 定义一个
register函数，用于注册事件监听器和返回清理函数。 - 使用
watch函数监听目标元素和选项的变化，并在发生变化时重新注册事件监听器。当目标元素发生变化时，先清理之前注册的事件监听器，然后使用flatMap遍历事件和监听器数组，并注册新的事件监听器，并将返回的清理函数添加到cleanups数组中。 - 通过
tryOnScopeDispose函数在组件销毁时自动清理事件监听器。 - 返回一个
stop函数，用于停止监听器并清理事件监听器。
