VueUse 的 addEventListener 是什么？有什么作用？

VueUse 是一个 Vue 的实用工具库，提供了很多有用的函数和组合式函数。addEventListener 是其中一个函数，它的作用是简化在 Vue 应用中添加和管理事件监听器的过程。

在传统的 Vue 开发中，我们可能会使用 v-on 指令来绑定事件，@click，但有时候，我们可能需要更灵活地控制事件监听器的生命周期，或者在组件之外添加事件监听器，这时候，addEventListener 就派上用场了。

如何使用 VueUse 的 addEventListener？

使用 addEventListener 非常简单，你需要安装 VueUse：

npm install @vueuse/core

在你的 Vue 组件中导入并使用它：

<template>
  <div>
    <button @click="toggleListener">Toggle Listener</button>
  </div>
</template>
<script setup>
import { addEventListener, removeEventListener } from '@vueuse/core';
import { ref } from 'vue';
const isListening = ref(false);
const handleResize = () => {
  console.log('Window resized');
};
const toggleListener = () => {
  if (isListening.value) {
    removeEventListener('resize', handleResize);
  } else {
    addEventListener('resize', handleResize);
  }
  isListening.value =!isListening.value;
};
</script>

在这个例子中，我们创建了一个按钮，点击它可以切换是否监听窗口的 resize 事件，当按钮被点击时，我们根据 isListening 的值来决定是添加还是移除事件监听器。

VueUse 的 addEventListener 有哪些优势？

1. 自动清理：在 Vue 组件中，当组件卸载时，addEventListener 会自动移除事件监听器，避免内存泄漏，这是因为它利用了 Vue 的生命周期钩子。
2. 更灵活的事件目标：除了 window、document 等常见的事件目标，你还可以传递一个 DOM 元素（例如通过 ref 获取的元素）作为事件目标。
3. 支持修饰符：类似于 v-on 指令，addEventListener 也支持一些修饰符，once（只触发一次）、passive（提高滚动性能）等。

示例：在自定义指令中使用 addEventListener

我们可能需要创建一个自定义指令来复用事件监听的逻辑,下面是一个示例：

<template>
  <div v-click-outside="handleClickOutside">
    <input type="text" />
  </div>
</template>
<script setup>
import { addEventListener } from '@vueuse/core';
import { ref } from 'vue';
const handleClickOutside = (event) => {
  // 这里可以添加点击外部时的逻辑
  console.log('Clicked outside', event.target);
};
const vClickOutside = {
  mounted(el, binding) {
    const handler = (event) => {
      if (!el.contains(event.target)) {
        binding.value(event);
      }
    };
    addEventListener('click', handler, true);
    el._clickOutsideHandler = handler;
  },
  unmounted(el) {
    removeEventListener('click', el._clickOutsideHandler, true);
    delete el._clickOutsideHandler;
  },
};
</script>

在这个自定义指令 v-click-outside 中，我们使用 addEventListener 来监听全局的 click 事件，当点击发生在指令绑定的元素外部时，触发 handleClickOutside 函数。

VueUse 的 addEventListener 是一个非常实用的工具，它简化了 Vue 应用中事件监听器的管理，提供了自动清理、灵活的事件目标和修饰符等功能，无论是在组件内还是自定义指令中，它都能帮助我们更高效地处理事件监听逻辑，通过合理使用 addEventListener，我们可以写出更健壮、更易于维护的 Vue 应用，希望这篇文章能帮助你更好地理解和使用 VueUse 的 addEventListener，如果你有任何问题或建议,欢迎在评论区留言。