面试题：Vue中常见导致内存泄漏的生命周期钩子场景及解决办法

Question

请列举Vue生命周期钩子中，哪些场景可能会导致内存泄漏，并说明如何避免这些内存泄漏问题。

Answer 1

可能导致内存泄漏的场景及避免方法

1. created、mounted钩子
   • 场景：在这两个钩子函数中，可能会添加一些全局事件监听器或订阅某些全局事件。如果在组件销毁时没有及时移除这些监听器或取消订阅，就会导致内存泄漏。例如，在mounted钩子中使用window.addEventListener('scroll', this.handleScroll)添加了一个窗口滚动事件监听器，若组件销毁时未移除该监听器，这个监听器会一直存在，组件实例无法被垃圾回收机制回收，从而导致内存泄漏。
   • 避免方法：在beforeDestroy钩子函数中移除相应的监听器或取消订阅。例如，beforeDestroy() { window.removeEventListener('scroll', this.handleScroll); }。
2. mounted钩子
   • 场景：如果在mounted钩子中创建了一些DOM元素，并将其添加到文档中，但在组件销毁时没有将这些DOM元素从文档中移除，也可能导致内存泄漏。比如创建了一个临时的div元素用于某些特定功能展示，没有清理。
   • 避免方法：在beforeDestroy钩子中找到并移除这些DOM元素。例如，假设在mounted中创建了一个id为temp - div的div元素，在beforeDestroy钩子中可以使用document.getElementById('temp - div').remove();。
3. mounted钩子中使用第三方库
   • 场景：当在mounted钩子中使用一些第三方库，且这些库没有提供良好的销毁机制时，可能会出现内存泄漏。比如某些地图库、图表库等，在组件销毁时若库本身没有正确清理资源，就会导致问题。
   • 避免方法：查阅第三方库的文档，看是否有提供相应的销毁方法。如果有，在beforeDestroy钩子中调用该方法。若没有，尝试联系库的维护者或寻找替代方案。例如，对于一个图表库Chart.js，如果在mounted中创建了图表实例this.chart = new Chart(ctx, options);，在beforeDestroy中可以调用this.chart.destroy();来清理资源。