在 vue 3 中，应通过 ref 绑定 canvas 元素，并在 onmounted 钩子中获取 2d 上下文；不可在 setup 顶层直接访问，需确保 dom 挂载完成，推荐类型标注 htmlcanvaselement 并封装绘图逻辑。
在 Vue 3 中，用 ref 获取 Canvas 元素、再配合 onMounted 拿到画布上下文（2D 句柄），是标准且安全的做法。关键点在于：不能在模板中直接操作 DOM，必须等组件挂载完成、DOM 真实存在后再访问。
1. 模板中用 ref 绑定 canvas 元素
给 <canvas></canvas> 标签添加 ref 属性，值为一个响应式引用（用 ref(null) 初始化）：
<template><canvas ref="canvasRef" width="800" height="600"></canvas></template>
2. 在 setup 中声明 ref 并在 onMounted 里获取上下文
使用 ref 创建引用，用 onMounted 确保 DOM 已就绪，再调用 getContext('2d')：
import { ref, onMounted } from 'vue'
export default {
setup() {
const canvasRef = ref(null)
let ctx = null
onMounted(() => {
const canvas = canvasRef.value
if (canvas) {
ctx = canvas.getContext('2d')
// ✅ 此时可安全绘图，例如：
// ctx.fillStyle = 'red'
// ctx.fillRect(10, 10, 100, 100)
}
})
return {
canvasRef
}
}
}
3. 注意事项和常见问题
避免以下典型错误：
-
不要在 setup 顶层直接取 ctx：此时
canvasRef.value还是null，因为 DOM 尚未渲染； -
确保 canvas 标签已正确渲染：如果 canvas 被
v-if控制或条件渲染，需确认它在挂载时确实存在； -
类型提示友好写法（TypeScript 推荐）：可显式标注
HTMLCanvasElement类型，避免getContext报错：
const canvasRef = ref<htmlcanvaselement null>(null)</htmlcanvaselement>
4. 后续绘图逻辑建议封装
拿到 ctx 后，推荐把绘制逻辑抽成函数（如 draw()），并在需要时（比如响应数据变化、动画帧）调用，而不是全堆在 onMounted 里：
- 用
watch监听相关响应式数据，触发重绘； - 做动画可用
requestAnimationFrame，但注意清理； - 若 canvas 尺寸需响应式，记得监听窗口 resize 或父容器变化并手动调用
canvas.width/height重设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
