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

ztj100 2025-06-12 19:08 10 浏览 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 为例）

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

总结

相关推荐

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

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

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

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

如何快速切换node版本?利用n包快速切换nodejs版本

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

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

为什么要手动销毁监听器

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

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

总结

相关推荐

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

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

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

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

如何快速切换node版本?利用n包快速切换nodejs版本

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

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

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