面试题：Vue组件销毁时如何确保事件系统无内存泄漏

Question

假设你正在开发一个复杂的Vue组件，组件内部有多种自定义事件、DOM事件绑定以及第三方库的事件监听。当组件销毁时，如何确保这些事件相关操作不会引发内存泄漏？请详细阐述实现思路和关键代码片段。

Answer 1

实现思路

1. 自定义事件解绑：Vue 实例通过 $on 绑定的自定义事件，在组件销毁时需要通过 $off 进行解绑。
2. DOM 事件解绑：使用 addEventListener 绑定的 DOM 事件，在组件销毁时要调用 removeEventListener 移除。
3. 第三方库事件监听解绑：第三方库绑定的事件，需根据其提供的 API 来解绑事件监听。

关键代码片段

1. 自定义事件解绑：

   <template>
     <div></div>
   </template>
   
   <script>
   export default {
     created() {
       this.$on('customEvent', this.handleCustomEvent);
     },
     methods: {
       handleCustomEvent() {
         // 处理逻辑
       }
     },
     beforeDestroy() {
       this.$off('customEvent', this.handleCustomEvent);
     }
   };
   </script>
   

2. DOM 事件解绑：

   <template>
     <div ref="myDiv"></div>
   </template>
   
   <script>
   export default {
     mounted() {
       this.$refs.myDiv.addEventListener('click', this.handleClick);
     },
     methods: {
       handleClick() {
         // 处理逻辑
       }
     },
     beforeDestroy() {
       this.$refs.myDiv.removeEventListener('click', this.handleClick);
     }
   };
   </script>
   

3. 第三方库事件监听解绑： 假设使用 lodash 的 debounce 来处理一个事件监听，以模拟第三方库的情况。

   <template>
     <div></div>
   </template>
   
   <script>
   import _ from 'lodash';
   
   export default {
     data() {
       return {
         debouncedFunc: null
       };
     },
     created() {
       this.debouncedFunc = _.debounce(this.handleEvent, 300);
       // 假设这里有一个元素触发这个防抖函数
       document.addEventListener('scroll', this.debouncedFunc);
     },
     methods: {
       handleEvent() {
         // 处理逻辑
       }
     },
     beforeDestroy() {
       document.removeEventListener('scroll', this.debouncedFunc);
       if (this.debouncedFunc) {
         this.debouncedFunc.cancel();
       }
     }
   };
   </script>