Vue组件卸载时需主动清理副作用以防内存泄漏，推荐使用onBeforeUnmount钩子或setup返回函数进行同步清理，watch/watchEffect虽自动清理但外部定时器、事件监听等仍需手动处理。
Vue 组件卸载时若不主动清理副作用，容易导致内存泄漏或意外行为（比如定时器继续运行、事件监听未解绑、全局订阅未取消）。Vue 提供了明确的生命周期钩子和 Composition API 的清理机制来应对这些问题。
onBeforeUnmount：执行清理的首选时机
在 Options API 中，beforeDestroy（Vue 2）已被废弃；Vue 3 推荐使用 onBeforeUnmount 钩子，在组件从 DOM 中移除前同步执行清理逻辑。它适用于清除定时器、解绑自定义事件、取消 pending 请求、移除第三方库监听等。
- 定时器需 clearTimeout / clearInterval，避免触发已销毁组件的响应式更新
- 使用 addEventListener 添加的监听器，必须配对调用 removeEventListener
- 若使用 mitt 或 EventBus，应调用 off() 取消对应事件订阅
- 使用 axios 或 fetch 发起的请求，建议配合 AbortController 实现中止（尤其长轮询或大文件上传场景）
setup 返回函数：自动注册 onBeforeUnmount
在 Composition API 中，setup() 函数可返回一个清理函数，Vue 会自动将其注册为 onBeforeUnmount 的回调。这种方式更简洁，且天然支持闭包捕获局部变量。
- 返回函数会在组件卸载前执行，无需显式调用 onBeforeUnmount
- 适合清理由 setup 内部创建的资源，例如 setInterval、watch 副作用、DOM 操作引用等
- 注意：返回函数仅执行一次，且不能异步（不支持 await），如需异步清理请改用 onBeforeUnmount
watch 和 watchEffect 的自动清理
Vue 的 watch 和 watchEffect 在组件卸载时会自动停止并清理依赖追踪，无需手动干预。但以下情况仍需额外处理：
立即学习“前端免费学习笔记（深入）”；
- watchEffect 内部启动了 setInterval 或 setTimeout —— 这些不属于 Vue 响应系统，必须手动清除
- watch 监听外部非响应式对象（如 window.resize）时，监听器本身不会被自动清理，需在 onBeforeUnmount 中显式移除
- 使用 { flush: 'post' } 的 watch 若触发 DOM 更新，其回调可能在组件卸载后执行，建议加 guard 判断组件是否 still alive（如检查某个 ref 是否为 null）
第三方库集成的清理注意事项
使用地图、图表、富文本编辑器等重型库时，它们常自行维护 DOM 和状态。组件卸载时，必须调用其提供的销毁方法，否则极易内存泄漏。
- ECharts：调用 chart.dispose()
- Leaflet / Mapbox：调用 map.remove() 或 map.off() 并置空引用
- Quill / Tiptap：调用 editor.destroy()，并确保事件监听一并解除
- 务必在 onBeforeUnmount 中执行，且避免重复调用（可加 flag 标记是否已销毁）
