watchEffect 是 Vue 3 中自动追踪依赖并执行副作用的工具，支持返回清理函数以销毁旧实例、重建新实例，需配合 onBeforeUnmount 防止组件卸载时内存泄漏。
watchEffect 是 Vue 3 响应式系统中一个简洁有力的副作用监听工具，它自动追踪响应式依赖并执行回调。当需要结合外部插件（如图表库 ECharts、地图 SDK、富文本编辑器等）做初始化与销毁时，关键在于：**在依赖变化时及时清理旧实例、重建新实例，避免内存泄漏和状态错乱**。
watchEffect 自动追踪 + 清理函数是核心机制
watchEffect 接收一个副作用函数，并可选返回一个清理函数（cleanup function）。该函数会在下一次副作用执行前被调用，适合释放资源：
- 清理定时器、事件监听器、WebSocket 连接
- 卸载外部插件实例（如
chart.dispose()、map.remove()） - 确保每次只存在一个有效实例，避免重复挂载
示例：用 ECharts 渲染动态数据图表
const chartRef = ref(null)
const option = ref({ series: [{ data: [1, 2, 3] }] })
const container = ref(null)
watchEffect((onCleanup) => {
if (!container.value) return
const chart = echarts.init(container.value)
chart.setOption(option.value)
// 清理函数：销毁当前 chart 实例
onCleanup(() => {
if (chart && !chart.isDisposed()) {
chart.dispose()
}
})
// 可选：将 chart 暴露给模板或其它逻辑使用
chartRef.value = chart
})
依赖变化时重建比“更新配置”更安全
很多外部插件不支持深度更新（如修改 option 中某个字段后调用 setOption 可能漏掉样式/交互逻辑），尤其涉及容器尺寸、主题、组件类型变更时。watchEffect 天然适合“销毁 → 重建”模式：
立即学习“前端免费学习笔记（深入）”；
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 当
theme、type、container或dataset发生变化，直接 dispose 再 init - 避免手动 diff 配置项，减少兼容性风险
- 配合
v-if或ref控制容器渲染时机，防止 init 在 DOM 不存在时执行
注意生命周期边界：组件卸载时仍需兜底清理
watchEffect 的清理函数只在副作用重新运行前触发，**组件 unmount 时不会自动调用**。因此必须配合 onBeforeUnmount：
- 在 watchEffect 内部创建的实例（如 chart、map），应统一存入 ref 或 reactive 对象
- 在
onBeforeUnmount中再次检查并销毁，防止组件销毁后清理函数未执行 - 尤其在异步加载插件（如动态 import echarts）时，可能 watchEffect 尚未执行，但组件已卸载
补充写法：
onBeforeUnmount(() => {
if (chartRef.value && !chartRef.value.isDisposed()) {
chartRef.value.dispose()
}
})
复杂场景建议封装成组合式函数（composable）
若多个组件都要集成同一类插件（如 ECharts、Leaflet），可抽离为可复用逻辑：
- 接收容器 ref、配置 ref、插件加载函数作为参数
- 内部管理实例 ref、watchEffect 和 onBeforeUnmount
- 暴露 update、resize、dispose 等方法供调用方控制
- 支持 SSR 友好判断（如
if (typeof window !== 'undefined')）
这样既保持 watchEffect 的响应式优势，又避免重复样板代码和清理疏漏。
