Vue.js生命周期destroyed钩子中内存泄漏排查与资源释放

destroyed钩子是Vue 2实例销毁后触发的最后一个生命周期钩子，此时实例已解绑、事件监听器被移除、子实例被销毁，但不保证异步操作或外部绑定已清理完毕，需手动释放全局事件、定时器、第三方库实例、手动创建DOM节点及未取消请求等资源。在 Vue 2 中，destroyed 钩子是实例销毁后触发的最后一个生命周期钩子，此时 Vue 实例已解绑、所有事件监听器被移除、所有子实例也被销毁。但它不保证所有异步操作或外部绑定已清理完毕——这正是内存泄漏的高发环节。哪些资源必须手动释放？Vue 不会自动帮你清理以下几类外部引用，若遗漏，极易导致 DOM 节点无法回收、定时器持续运行、事件监听器残留：全局或第三方库绑定的事件：如 window.addEventListener('resize', handler)、document.addEventListener('click', ...) 定时器（setTimeout/setInterval）：未清除的定时器会持有对组件作用域的引用 第三方库实例：如 Mapbox、Chart.js、IntersectionObserver、MutationObserver 等需显式调用 destroy() 或 disconnect() 手动创建的 DOM 元素或 Shadow DOM：通过 document.createElement 插入但未移除的节点 Promise 回调或未完成的请求：虽然请求本身不会阻塞 GC，但未取消的 axios.CancelToken 或 AbortController 可能延长响应处理链的生命周期如何在 destroyed 中安全释放？关键原则：只清理你在组件中主动创建/绑定的资源，并确保清理逻辑幂等、无副作用。推荐结构化管理：将所有需清理的句柄（timer ID、observer 实例、事件监听函数引用）统一存入一个数组或对象（如 this._cleanup = []） 在 mounted 或 created 中注册资源时，同步 push 到清理队列 在 destroyed 中遍历执行清除（注意避免重复调用报错）示例： 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。