Vue 单页面应用中，不要在 onMount 里添加事件监听器！

大家好，我是宝哥。

在开发Vue单页面应用时，我们经常会遇到需要在组件中添加事件监听器的情况。然而，如果不正确地管理这些监听器，就可能引发一些棘手的问题，比如事件触发次数异常增加。本文将分享一次我在项目中遇到的事件监听器堆叠问题，以及我是如何通过几种策略来解决这个问题的。

本周我会分享下面一系列的Vue教程，欢迎关注我。

• Vue 如何处理异步组件加载错误

• 38个Vue、Nuxt 和 Vite 技巧、窍门和实践的集合

• Vue 单页面应用中，不要在 onMount 里添加事件监听器！

• 开源 Vueform 中的新 phone 元素

• Vue DevTools Next v7.2 发布

• 尤大谈 Vite & Vue 2024 状态

引言

最近在为客户做一个项目时，需要在基于 Vue  的单页面应用  (SPA)  中集成一个事件监听器，该事件监听器用于一个名为  "HomeView"  的组件，该组件包含一个  iframe。这个事件，名为  "triggerEvent"，最初是在  HomeView  的  onMount  生命周期钩子中设置的。这种设置会导致一个意想不到的行为：当你离开  HomeView  然后返回时，"triggerEvent"  会触发多次，表明事件监听器在堆叠。

问题分析

为了更好地理解这个问题，我尝试使用  location.replace()  而不是  router.push()  来进行导航。前者似乎解决了问题，这表明导航方法会影响事件监听器的行为。进一步测试  router.push()  证实，每次导航都会添加一个新的监听器，而不会移除之前的监听器，从而导致触发次数不断增加。

根本原因

这种行为源于像  Vue  这样的  SPA  框架如何管理事件监听器。在 Vue  中，使用  onMount  挂载的组件，在卸载时不会自动清理其事件监听器，除非在代码中显式地进行清理。因此，如果一个组件多次挂载，就像在  SPA  中使用  router.push()  进行导航（不进行完整的页面重新加载）时常见的情况，就会导致监听器重复。

解决方案

组件卸载时清理监听器

为了防止此问题，一个有效的策略是在组件卸载时移除事件监听器：

<template>
 <!-- Your component template -->
</template>

<script> import { onMounted, onUnmounted } from 'vue';

export default {
 setup() {
   const handleEvent = () => console.log('Event triggered');
   onMounted(() => window.addEventListener('triggerEvent', handleEvent));
   onUnmounted(() => window.removeEventListener('triggerEvent', handleEvent));
 }
}; </script>`

条件事件监听器绑定

另一种方法是在添加新的监听器之前检查是否已存在监听器，从而防止重复：

<template>
 <!-- Your component template -->
</template>

<script> import { onMounted, ref } from 'vue';

const eventBound = ref(false);

export default {
 setup() {
   const handleEvent = () => console.log('Event triggered');
   onMounted(() => {
     if (!eventBound.value) {
       window.addEventListener('triggerEvent', handleEvent);
       eventBound.value = true;
     }
   });
 }
}; </script>`

在  App.vue  中添加全局事件监听器

另一种方法是将事件监听器放在  App.vue  中，该组件只挂载一次，从而避免任何重新绑定问题：

<template>
 <div id="app">
   <!-- Your app template -->
 </div>
</template>

<script> import { onMounted } from 'vue';

export default {
 setup() {
   const handleEvent = () => console.log('Global event triggered');
   onMounted(() => window.addEventListener('triggerEvent', handleEvent));
 }
}; </script>`

总结

通过上述的探索和实践，我们可以看到，正确地管理事件监听器对于保持Vue单页面应用的稳定性和性能至关重要。无论是在组件卸载时进行清理，还是在添加之前检查监听器是否已存在，或是将监听器放在全局的App.vue中，这些策略都能有效地避免事件监听器的堆叠问题。希望这些经验能够帮助你在未来的Vue开发中避免类似的问题，让你的应用更加健壮和高效。

---

往期文章推荐：

• Vue 开源版「抖音」，火了！
  

• Vue 3 将推出新特性，可以抛弃虚拟DOM了！
  

• 炸裂开源！标星 17k 的安卓手机模拟器，无需 root，支持 Windows、Mac 和 Linux！
  

• Vue 3 响应式状态揭秘：ref() 函数的魔法
  

• 41.1k Star！一个前端开发者必看的资源汇总，涵盖工具、课程、社区及更多！
  

• 标星23.2K！一键打包网页变身为跨平台桌面应用神器！
  

• 2024年10个高颜值的免费HTML模板库！
  

---

最后，如果你觉得宝哥的分享还算实在，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

关注下方宝哥微信，进宝哥前端开发11群，

获取我公众号整理的所有资料，

包括前端电子书，面试资料，简历模板和副业资料等！

添加好友备注【加群】拉你进技术交流群

公众号：前端开发博客 专注 前端开发技术，分享 前端开发资源和 WEB前沿资讯，如果喜欢我的分享，给 宝哥 点一个 赞 或者 分享 都是对我的支持

点击底部「阅读原文」跳转飞书文档（加入微信群）

以上，如果本文对你有所启发，欢迎点“在看、点赞”支持下吧！