<think>我们正在讨论的是在
Vue中
监听hover事件。在
Vue中，我们可以使用原生的JavaScript事件，也可以使用
Vue提供的指令（如v-on）来
监听事件。对于hover事件，实际上对应的是鼠标移入（mouseenter）和鼠标移出（mouseleave）事件。
在
Vue中，我们可以通过以下方式
监听hover事件：
1
. 使用`v-on`指令（或其简写`@`）来
监听`mouseenter`和`mouseleave`事件。
2
. 使用
VueUse库
中的`useElementHover`组合式API（如果项目使用了
VueUse）。
下面分别介绍这两种方式。
### 方法1：使用
Vue原生指令
在模板中直接使用`@mouseenter`和`@mouseleave`：
```html
<template>
<div
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
悬停区域
</div>
</template>
<script>
export default {
methods: {
handleMouseEnter
() {
console
.log
('鼠标移入'
);
},
handleMouseLeave
() {
console
.log
('鼠标移出'
);
}
}
}
</script>
```
或者，如果你想在同一个方法中处理，可以传入事件对象，或者使用一个状态变量来跟踪悬停状态：
```html
<template>
<div
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
>
悬停区域 - {{ isHovered ? '悬停中' : '未悬停' }}
</div>
</template>
<script>
export default {
data
() {
return {
isHovered: false
};
}
}
</script>
```
### 方法2：使用
VueUse的`useElementHover`
VueUse是一个实用的
Vue组合式API集合，其中提供了`useElementHover`来帮助我们轻松地跟踪一个元素是否被悬停。
首先，确保安装了`@
vueuse/core`：
```bash
npm install @
vueuse/core
```
然后在组件中使用：
```html
<template>
<div ref="hoverableElement">
悬停区域 - {{ isHovering ? '悬停中' : '未悬停' }}
</div>
</template>
<script>
import { ref } from '
vue';
import { useElementHover } from '@
vueuse/core';
export default {
setup
() {
const hoverableElement = ref
(null
);
const isHovering = useElementHover
(hoverableElement
);
return {
hoverableElement,
isHovering
};
}
}
</script>
```
这样，`isHovering`就会是一个响应式的布尔值，表示该元素是否被悬停。
### 注意事项
- 使用原生事件时，注意事件冒泡和事件委托的情况。`mouseenter`和`mouseleave`不会冒泡，但是如果你在内部元素和外部元素之间移动，可能会触发外部元素的`mouseleave`。如果你需要事件冒泡，可以使用`mouseover`和`mouseout`，但要注意它们会冒泡。
- 使用
VueUse的`useElementHover`可以简化代码，并且它是响应式的，适合在组合式API中使用。
以上就是在
Vue中
监听hover事件的方法。
根据引用[2]中提到的
VueUse的`onKeyStroke`，我们可以类比使用
VueUse的`useElementHover`，这也是引用[2]中提到的。
另外，引用[1]中提到关于
Vue实例销毁后的事件失效问题，这里需要注意：如果我们在组件中
监听了事件，在组件销毁前，
Vue会自动为我们移除这些事件
监听。但是，如果我们手动使用原生方式添加了事件
监听（比如通过`addEventListener`），那么就需要在`beforeUnmount`或`unmounted`生命周期钩子中手动移除，以避免内存泄漏。
对于`useElementHover`，它内部会自动处理这些清理工作，所以我们不必担心。
因此，推荐使用
VueUse的`useElementHover`，因为它更简洁且易于维护。
下面再给出一个在选项式API中使用
VueUse的示例（需要
Vue2
.7+或
Vue3）：
```html
<template>
<div ref="hoverableElement">
悬停区域 - {{ isHovering ? '悬停中' : '未悬停' }}
</div>
</template>
<script>
import { useElementHover } from '@
vueuse/core';
export default {
data
() {
return {
isHovering: false
};
},
mounted
() {
// 在mounted之后才能访问到DOM元素
const element = this
.$refs
.hoverableElement;
// 使用
VueUse的useElementHover，它返回一个ref
const hoverRef = useElementHover
(element
);
//
监听这个ref的变化
this
.$watch
(
() => hoverRef
.value,
(new
Val) => {
this
.isHovering = new
Val;
}
);
}
}
</script>
```
但是，在选项式API中这样使用组合式API可能不太自然，因此更推荐在组合式API中使用。
如果不想使用
VueUse，也可以自己封装一个组合式函数，但使用成熟的库会更方便。
综上所述，根据你的项目情况选择合适的方法。
### 相关问题
1
. 在
Vue中如何
监听键盘事件？
2
. VueUse中还有哪些常用的事件
监听函数？
3
. 如何在
Vue组件销毁时正确移除事件
监听器？
4
. 如何避免在
Vue中使用事件
监听时出现的内存泄漏问题？</think>在
Vue 框架中
监听 hover 事件，可以通过以下两种主流方式实现：
### 方法一：使用
Vue 原生事件绑定（推荐）
```html
<template>
<!-- 绑定 mouseenter 和 mouseleave 事件 -->
<div
@mouseenter="handleHoverStart"
@mouseleave="handleHoverEnd"
>
悬停区域
</div>
</template>
<script>
export default {
methods: {
handleHoverStart
() {
console
.log
('鼠标进入'
);
// 添加悬停状态逻辑
},
handleHoverEnd
() {
console
.log
('鼠标离开'
);
// 移除悬停状态逻辑
}
}
}
</script>
```
### 方法二：使用
VueUse 的 `useElementHover`（组合式 API）
```html
<template>
<div ref="hoverElement">
{{ isHovering ? "悬停中" : "未悬停" }}
</div>
</template>
<script setup>
import { ref } from '
vue';
import { useElementHover } from '@
vueuse/core';
const hoverElement = ref
(null
);
const isHovering = useElementHover
(hoverElement
);
//
监听状态变化
watch
(isHovering,
(new
Val) => {
console
.log
(new
Val ? '开始悬停' : '结束悬停'
);
}
);
</script>
```
### 两种方法对比：
| **特性** | **原生事件绑定** | **
VueUse 的 useElementHover** |
|------------------|--------------------------------------|-------------------------------------|
| 复杂度 | 较低（
Vue 内置支持） | 中等（需安装依赖） |
| 响应式状态 | 需手动管理 | 自动返回响应式布尔值 |
| 适用场景 | 简单交互 | 复杂状态管理 |
| 额外依赖 | 无 | 需要安装 `@
vueuse/core` |
| 事件类型 | 明确区分 enter/leave | 统一状态管理 |
### 注意事项：
1
. **组件销毁**：
Vue 会自动清理模板
中的事件
监听器[^1]，但手动使用 `addEventListener` 需要在 `beforeUnmount` 中移除
2
. **移动端适配**：触摸设备可能不会触发 hover 事件，需考虑 `@touchstart` 和 `@touchend` 事件
3
. **性能优化**：避免在 hover 事件中执行重操作，可添加防抖：
```javascript
import { debounce } from 'lodash-es';
methods: {
handleHoverStart: debounce
(function
() {
// 防抖逻辑
}, 100
)
}
```
### 完整示例（组合式 API）：
```html
<template>
<div
ref="hoverRef"
:class="{ 'hover-effect': isHovering }"
>
悬停区域
({{ isHovering ? '激活' : '未激活' }}
)
</div>
</template>
<script setup>
import { ref } from '
vue';
import { useElementHover } from '@
vueuse/core';
const hoverRef = ref
(null
);
const isHovering = useElementHover
(hoverRef
);
// 可选的副作用逻辑
watch
(isHovering,
(val) => {
if
(val) console
.log
('执行悬停动画'
);
}
);
</script>
<style>
.hover-effect {
background: #f0f8ff;
transition: background 0
.3s;
}
</style>
```
扫一扫
1802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
