Vue SFC销毁前须在onBeforeUnmount中主动清理定时器、全局事件监听器、WebSocket、第三方库实例、异步请求及自定义事件订阅等外部资源，防止内存泄漏和报错。
Vue 单文件组件（SFC）在销毁前必须主动清理外部资源，否则容易引发内存泄漏、重复执行、报错或服务端连接堆积等问题。核心原则是：**不等组件消失，而是在它卸载前最后一刻收尾**。
哪些资源必须手动清理
以下几类资源 Vue 不会自动管理，必须显式释放：
-
定时器（
setTimeout/setInterval）：未清除会导致回调继续执行，可能访问已销毁的响应式数据，抛出Cannot read property 'xxx' of null类错误 -
全局事件监听器（如
window.addEventListener('resize', ...)）：不移除会持续触发，且可能在其他组件中重复注册 - WebSocket 或长连接：连接保持会占用服务端会话、影响用户登录态，甚至触发无效重连
-
第三方库实例（如 ECharts、Leaflet Map、Quill 编辑器）：多数提供
.destroy()或.dispose()方法，跳过调用会导致 DOM 节点残留和内存堆积 -
异步请求的取消机制（如 Axios 的
CancelToken或AbortController）：防止响应返回后尝试更新已卸载组件的状态 - 自定义事件总线或 RxJS 订阅：未取消订阅，事件仍会调用已不存在的方法，造成静默失败或报错
该在哪个钩子里清理
统一使用 onBeforeUnmount（组合式 API）或 beforeUnmount（选项式 API）。
这是最安全、推荐的时机，因为：
立即学习“前端免费学习笔记（深入）”；
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 组件实例完整可用，
ref、reactive、this上的数据和方法都可正常访问 - DOM 尚未移除，必要时还能读取尺寸、位置或做最后渲染
- 它是 Vue 明确设计的“清理专岗”，比
onUnmounted更早触发，确保清理动作在资源真正失效前完成
避免使用 onUnmounted —— 此时组件已解绑，$el 为空，响应式系统停止工作，很多清理逻辑已无法执行。
怎么写才清晰可靠
清理逻辑应与创建逻辑就近配对，保持可读性和可维护性：
- 在
setup中用ref声明资源引用（如timer、socket、chart），便于后续判空和清理 - 一个资源，一个归属，一处清理；避免分散在多个生命周期里
- 清理后将引用置为
null或undefined，防止重复调用或误用
示例（组合式 API）：
const timer = ref(null)<br>
const socket = ref(null)<br>
const chart = ref(null)<br><br>
onMounted(() => {<br>
timer.value = setInterval(() => { /* 更新状态 */ }, 2000)<br>
socket.value = new WebSocket('wss://api.example.com')<br>
chart.value = echarts.init(document.getElementById('chart'))<br>
})<br><br>
onBeforeUnmount(() => {<br>
if (timer.value) clearInterval(timer.value)<br>
if (socket.value) socket.value.close()<br>
if (chart.value) chart.value.dispose()<br>
timer.value = null<br>
socket.value = null<br>
chart.value = null<br>
})
额外注意事项
部分场景需结合具体技术处理：
-
事件监听器绑定在非全局对象上（如某个第三方容器元素），记得保存该元素引用，并在清理时调用
element.removeEventListener -
使用
AbortController取消 fetch 请求：在onBeforeUnmount中调用controller.abort() -
v-if 控制组件显隐时：每次隐藏即触发销毁流程，清理逻辑会自然执行；而
v-show不销毁组件，无需在此阶段清理 -
子组件由父组件动态创建（如
createApp或new Component().$mount()），除自身清理外，还需确保父组件中持有的实例引用被置空
