在 Vue.js 中，当组件进入销毁（destroy）阶段时，框架会自动处理很多清理工作。然而，有些资源和事件需要我们手动处理，以避免内存泄漏或其他潜在问题。以下是需要手动销毁的一些内容：
1 事件监听器：
如果在 mounted 或其他生命周期钩子中使用了 addEventListener 添加的全局事件监听器，需要在 beforeDestroy 或 destroyed 钩子中手动移除。
mounted() {window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {window.removeEventListener('resize', this.handleResize);
}
2 自定义事件：
使用 $on 添加的自定义事件监听器也需要在组件销毁时手动移除。
created() {this.$on('customEvent', this.handleEvent);
},
beforeDestroy() {this.$off('customEvent', this.handleEvent);
}
3 第三方库实例：
如果在组件中创建了第三方库的实例（如图表库、地图库等），需要在销毁阶段销毁这些实例。
mounted() {this.chart = new Chart(...);
},
beforeDestroy() {if (this.chart) {this.chart.destroy();}
}
4 定时器：
setInterval 或 setTimeout 创建的定时器需要在组件销毁时清除。
mounted() {this.timer = setInterval(() => {// Do something}, 1000);
},
beforeDestroy() {if (this.timer) {clearInterval(this.timer);}
}
5 WebSocket 连接：
如果组件中使用了 WebSocket 连接，需要在销毁时关闭连接。
mounted() {this.socket = new WebSocket('ws://...');this.socket.onmessage = this.handleMessage;
},
beforeDestroy() {if (this.socket) {this.socket.close();}
}
那么，如果不手动销毁，有哪些坏处呢？
1 内存泄漏：
如果不手动移除事件监听器或清除定时器，这些资源将持续占用内存，即使组件已经被销毁。随着时间的推移，这些未清理的资源会积累，导致内存泄漏，最终可能使应用变慢甚至崩溃。
2 性能问题：
未清理的事件监听器、定时器或第三方库实例会继续运行，执行不必要的计算或操作，从而影响应用的整体性能。
3 意外行为：
持续存在的事件监听器可能会在组件销毁后继续触发，导致应用执行与预期不符的代码，出现意外行为或错误。
4 资源浪费：
未关闭的 WebSocket 连接、未销毁的第三方库实例等资源会继续占用网络带宽和处理能力，造成资源浪费。
5 难以调试：
内存泄漏和意外行为通常较难调试，尤其是在应用变得复杂时。未清理的资源和事件可能导致难以重现和定位的问题。
6 安全风险：
在某些情况下，未清理的事件监听器或 WebSocket 连接可能会导致安全风险。例如，未关闭的 WebSocket 连接可能会暴露应用于潜在的攻击。
为了确保应用的稳定性和性能，在组件销毁阶段手动清理上述资源是非常重要的。可以通过
beforeDestroy或destroyed生命周期钩子来实现这一点，保证所有的外部资源和事件在组件销毁时得到正确清理。
