vue组件里写原生addEventListeners监听事件，要去手动销毁吗?

ztj100 2025-06-12 19:08 25 浏览 0 评论

是的，在 Vue 组件中使用原生 addEventListener 监听事件时，通常需要在组件销毁时手动移除监听器，也就是调用 removeEventListener。这样做有以下几个原因：

为什么要手动销毁监听器

防止内存泄漏
如果不移除监听器，即使组件已经被销毁，事件监听仍然存在，引用着组件中的方法或数据，导致垃圾回收无法释放内存。
防止重复绑定
若组件多次挂载卸载，每次 addEventListener 都增加一个新的监听，而不移除旧的，会导致事件响应多次触发。
避免意外行为
销毁后的组件逻辑还在响应事件，可能会造成数据异常或报错。

正确的使用方式（以 Vue 3 为例）

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'

function handleResize() {
  console.log('窗口尺寸变化')
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

特殊情况：不一定需要销毁的例子

使用了 Vue 自带的事件绑定（如 @click） → Vue 会自动管理。
给 DOM 节点添加事件且该节点只存在于当前组件内 → Vue 销毁时 DOM 消失，监听器随之移除（但推荐仍要显式移除）。

总结

自己手动添加的监听器，就要自己手动移除。

这是组件生命周期管理的良好实践，尤其是在监听的是全局对象（如 window、document）时。

需要我帮你封装一个事件监听的 Vue composable（组合式函数）吗？#js原生监听事件#vue3##前端开发#

vue onmounted

上一篇：从 React 过渡到 Vue 3:开发者的实践指南
下一篇：一文教你学会vue3常用语法!（vue用法大全）

vue组件里写原生addEventListeners监听事件，要去手动销毁吗?

为什么要手动销毁监听器

正确的使用方式（以 Vue 3 为例）

特殊情况：不一定需要销毁的例子

总结

相关推荐

取消回复欢迎你发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

这一次，彻底搞懂Java并发包中的Atomic原子类

vue组件里写原生addEventListeners监听事件，要去手动销毁吗?

为什么要手动销毁监听器

正确的使用方式（以 Vue 3 为例）

特殊情况：不一定需要销毁的例子

总结

相关推荐

取消回复欢迎 你 发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

这一次，彻底搞懂Java并发包中的Atomic原子类

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起