Vue.js中如何正确使用ref操作第三方库DOM实例的生命周期？

本文共计556个文字，预计阅读时间需要3分钟。

在Vue 3中，使用`ref`获取第三方库（如Chart.js）实例，无需图片解释，直接输出结果：

ref 必须配合 v-el 绑定，且初始值为 null

声明 ref 时应显式初始化为 null，避免类型错误和误判：

const chartRef = ref(null)

模板中通过 v-el（Vue 3 的 ref 绑定语法）关联真实 DOM 节点：

<canvas ref="chartRef"></canvas>

这样 chartRef.value 才会在挂载后指向真实的 <canvas> 元素。

立即学习“前端免费学习笔记（深入）”；

第三方实例必须在 onMounted 中创建

onMounted 是首个能确保 DOM 已渲染、ref 已赋值的生命周期钩子。