在 Vue 3 中，第三方库 DOM 实例必须在 onMounted 中初始化，ref 需初始化为 null 并通过 v-el 绑定真实元素；卸载时须在 onUnmounted 中手动销毁实例并清理资源，数据更新需主动调用库的更新方法。
在 Vue 3 中，用 ref 拿到第三方库（如 Chart.js、Mapbox、Swiper 等）创建的 DOM 实例时，**不能在 setup() 同步获取或操作 DOM 元素**，必须等模板渲染完成、真实 DOM 挂载后才能安全调用。核心原则是：**DOM 实例初始化必须发生在 onMounted 钩子中，且 ref 值需确保已绑定到真实元素**。
ref 必须配合 v-el 绑定，且初始值为 null
声明 ref 时应显式初始化为 null，避免类型错误和误判：
const chartRef = ref(null)
模板中通过 v-el（Vue 3 的 ref 绑定语法）关联真实 DOM 节点：
<canvas ref="chartRef"></canvas>
这样 chartRef.value 才会在挂载后指向真实的
第三方实例必须在 onMounted 中创建
onMounted 是首个能确保 DOM 已渲染、ref 已赋值的生命周期钩子。此时可安全传入 DOM 节点给第三方库：
- ✅ 正确：在 onMounted 内检查 ref.value 是否存在，再初始化库实例
- ❌ 错误：在 setup 顶层或 onBeforeMount 中直接 new Chart(chartRef.value) —— 此时 ref.value 还是 null
- ⚠️ 注意：若组件可能被 keep-alive 包裹，还需监听 activated 钩子做重绘或更新逻辑
销毁时务必手动清理第三方实例
第三方库常自行绑定事件、定时器或 canvas 上下文，Vue 卸载组件时不会自动清理。应在 onUnmounted 中释放资源：
- 调用实例的 destroy()、dispose() 或 clear() 方法（如 Chart.destroy()、map.remove()）
- 手动移除事件监听器（如 map.off('click', handler)）
- 将 ref.value 设为 null（非必需，但利于内存回收和调试判断）
响应式更新需主动触发（非自动）
第三方库实例本身不响应 Vue 的响应式变化。例如 data 改变后，需手动调用其更新方法：
- Chart.js：调用 chart.data = newData; chart.update()
- Swiper：swiper.slideTo(index) 或 swiper.update()
- 建议封装 update 函数，在 watch 监听相关响应式数据变更后调用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
