在 setup 中处理第三方库需在 onMounted 实例化、onUnmounted 手动销毁，禁止顶层或 beforeMount 初始化，推荐封装为组合函数统一管理生命周期。
在 setup 中处理第三方非 Vue 库（如 Chart.js、Leaflet、Ace Editor 等）的实例化与销毁，核心是**时机控制 + 主动清理**。不能直接在 setup 顶层创建，也不能依赖 Vue 自动回收 —— 必须手动管好“生”和“死”。
✅ 实例化必须放在 onMounted 中
第三方库依赖真实 DOM 节点，而 setup 执行时 DOM 尚未生成，ref.value 还是 null。只有 onMounted 是首个能确保：DOM 已挂载、ref 已绑定、节点可安全传入库的钩子。
- 用
ref绑定目标容器（如<canvas ref="chartRef">） - 在
onMounted内先判空：if (chartRef.value) { new Chart(chartRef.value, options) } - 若组件可能被
<keep-alive>包裹，还需监听onActivated做重绘或尺寸同步（例如调用chart.resize()）
✅ 销毁必须在 onUnmounted 中手动执行
Vue 卸载组件时，不会自动解绑第三方库注册的事件、定时器、Canvas 上下文或 WebSocket 连接。不清理会导致内存泄漏、重复初始化、事件响应错乱等问题。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 保存库实例到响应式变量（如
const chart = ref(null)），便于后续访问 - 在
onUnmounted中调用标准销毁方法：chart.value?.destroy()、map.value?.remove()、editor.value?.destroy() - 手动移除显式绑定的事件：
map.value?.off('click', handler) - 可选：将 ref 设为 null，辅助调试和 GC（如
chart.value = null）
⚠️ 注意 setup 顶层和 beforeMount 的常见错误
这些位置无法访问有效 DOM 节点，强行使用会报错或静默失败：
立即学习“前端免费学习笔记（深入）”；
-
不要在 setup 顶层写
new Chart(chartRef.value)—— 此时chartRef.value === null -
不要在
onBeforeMount初始化 —— DOM 尚未插入文档，部分库（如某些地图 SDK）仍无法正确测量容器 -
避免在
onUpdated或watch中反复重建实例 —— 应该更新已有实例（如chart.data = newData; chart.update()），而非销毁再新建
? 补充建议：封装成可复用组合函数
把初始化、更新、销毁逻辑抽成 useChart、useMap 等组合函数，既提升复用性，也天然隔离生命周期管理：
- 接收 ref 和配置作为参数
- 内部调用
onMounted/onUnmounted - 返回实例、更新方法、加载状态等，模板中直接解构使用
