Vue组件卸载时必须主动清理副作用资源，否则易致内存泄漏等问题；应遵循“谁注册、谁清理”原则，利用onUnmounted钩子、watchEffect的onInvalidate机制及第三方库显式销毁方法进行清理。
Vue 组件卸载时必须主动清理副作用资源，否则容易引发内存泄漏、定时器误执行、事件监听残留或 API 请求未取消等问题。Vue 提供了明确的生命周期钩子和 Composition API 的清理机制，关键在于“谁注册、谁清理”原则。
onUnmounted：选项式与组合式通用的清理入口
这是组件实例被销毁前执行的最后机会，适用于清除定时器、解绑全局事件、关闭 WebSocket 连接等。
- 在 选项式 API 中直接定义：
beforeUnmount()（Vue 3 推荐）或beforeDestroy()（Vue 2 / 兼容模式） - 在 组合式 API 中使用
onUnmounted(() => { /* 清理逻辑 */ })，需确保在setup()或setup返回的函数内调用 - 注意：该钩子只在组件从 DOM 中移除且所有子组件也已卸载后触发，不保证父组件是否仍存活
watch 和 watchEffect 的自动清理能力
Vue 的响应式侦听器本身具备自动清理机制——当组件卸载时，由 watch 或 watchEffect 创建的侦听器会自动停止，无需手动调用 stop()（除非你显式保存了 stop 函数并用于提前终止）。
- 但若在
watchEffect内部启动了异步操作（如setTimeout或fetch），其回调仍可能在组件卸载后执行，需配合标志位或 AbortController 控制 - 推荐在
watchEffect回调中使用onInvalidate处理“中断前清理”，例如取消未完成的请求或清除待执行的定时器
useEffect 类风格的清理函数（Composition API 中的 onInvalidate）
watchEffect 支持传入一个函数，该函数接收 onInvalidate 回调，用于声明“当前副作用应被失效时”的清理行为。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 每次新副作用运行前，上一次副作用的
onInvalidate会被自动调用（包括组件卸载时） - 适合清理防抖定时器、取消 pending 的 fetch 请求、重置第三方库状态等
- 示例：
watchEffect(onInvalidate => { const timer = setTimeout(...); onInvalidate(() => clearTimeout(timer)); })
第三方库集成时的显式释放要求
某些外部资源（如 Chart.js 实例、Mapbox 地图容器、MediaRecorder、IntersectionObserver）不会随组件卸载自动释放，必须手动调用其销毁方法。
- Chart.js：调用
chart.destroy() - Mapbox GL JS：调用
map.remove()或map.on('remove', ...) - IntersectionObserver：调用
observer.disconnect() - 务必在
onUnmounted中执行，避免重复调用（可加 guard 判断实例是否存在）
不复杂但容易忽略。核心是识别哪些资源脱离了 Vue 响应式系统的管理范围，然后在组件退出前一一回收。
