vue组件的事件是否有必要在组件销毁前进行移除?

element ui的源码中有以下一段代码

mounted() {
      this.startTimer();
      document.addEventListener('keydown', this.keydown);
    },
    beforeDestroy() {
      document.removeEventListener('keydown', this.keydown);
    }

这里在组件销毁前对之前的事件舰艇进行了移除

vue的官方文档对destroyed有一个描述

clipboard.png

其中提到所有事件监听器都会被移除, 所以element源码中在组件销毁前的事件移除是否有什么深意?
vue组件中的事件绑定是否有必要都进行事件移除呢?

阅读 13.7k
4 个回答

时隔两天,这几天随着封装组件对vue的了解又深了一点,关于vue绑定事件是否需要移除这个问题,我有了一些新的思考,
我认为正如官方文档内所说在组件销毁时与实例相关事件是会自动销毁的,和之前几位答主说的调用原生就不会被销毁的观点不同
我认为,只要是挂载在实例上的事件都会被销毁

再来看看element ui的源码,这里的事件移除也是很有意义的,因为这个组件在挂载时给整个文档都绑定了键盘监听,而组件销毁只会销毁与实例相关的事件,如果将事件绑在文档或文档中其他与实例不相关的节点上是必须取消监听的,因为该事件与实例无关,因此不会自动销毁。


很抱歉取消了之前那位答主的采纳,因为自己也疯了一些插件有了新的认识觉得之前采纳的答案并不对。就暂时采纳了自己的见解。请看到这个题目的各位如果有不同的建议欢迎继续探讨。

必须移除的,不然整个组件的实例都无法被垃圾回收,导致内存泄漏

如果是调用原生的addEventListeners绑定的话, 要主动销毁

你上面说的是Vue本身的一些绑定监听,比如v-model,@click,@blur等等。

但是原生的document.addEventListener事件比如scrollkeydownkeyup,vue当然监测不到,无法移除监听,你可以自己销毁

你不移除就会遇到我昨天刚回答的一个哥们遇到的问题:利用keep-alive缓存页面的时候另一个页面会执行上一个页面的方法?,很多页面同时处理监听事件。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏