在 Vue 3 中用 ref 控制 Canvas 绘图，需用 ref 获取 DOM 元素并在 onMounted 中获取 ctx，用 ref 管理绘图状态（如 isDrawing、strokeColor），不将 ctx 设为 ref；通过事件中读取 ref.value 驱动手动重绘，避免 setup 初期获取 ctx 或对 canvas 元素直接响应式修改。
在 Vue 3 中使用 ref 控制 Canvas 绘图逻辑，核心在于让 Canvas 的上下文（ctx）和绘图状态（如坐标、颜色、是否正在绘制）响应式联动，同时避免直接在模板中操作 DOM 导致响应失效。
ref 管理 Canvas 元素与绘图状态
用 ref 同时绑定 DOM 元素和业务状态，是实现响应式绘图控制的基础：
-
Canvas 元素 ref：通过
template ref获取原生<canvas>实例，再调用getContext('2d')得到绘图上下文；注意该操作应在onMounted中执行，确保 DOM 已挂载 -
绘图状态 ref：例如
isDrawing = ref(false)、strokeColor = ref('#000')、lineWidth = ref(2)，这些值变化可触发重绘或影响下一笔行为 - 不要把
ctx本身设为ref—— 它不是响应式数据，而是工具对象；真正需要响应的是“用什么画、怎么画”的参数
监听 ref 变化驱动重绘逻辑
Vue 响应式不自动重绘 Canvas，需手动触发更新。常见做法是结合 watch 或事件回调：
- 当
strokeColor或lineWidth改变时，可立即更新ctx.strokeStyle和ctx.lineWidth，后续绘制自然生效 - 对路径类状态（如
points = ref([])），可用watch(points, drawPath, { deep: true })在点集变化时清空重绘整条线 - 更高效的方式是把绘图封装成函数（如
draw()），在鼠标/触摸事件中调用，并在其中读取最新ref值，而非依赖 watch
事件处理中安全访问 ref 值
Canvas 绘图高度依赖用户交互（mousedown、mousemove 等），需确保在事件回调中正确读写 ref：
立即学习“前端免费学习笔记（深入）”；
- 所有事件处理器应定义在
setup内或onMounted后，避免 this 或作用域丢失 - 读取
ref用.value（如ctx.strokeStyle = strokeColor.value），赋值也需显式.value = ... - 若涉及异步（如防抖笔迹平滑），注意闭包中捕获的是 ref 当前值，不是快照 —— 这反而是优势，能保证用最新配置绘制
避免常见响应式陷阱
Canvas 场景下容易误用 ref 导致逻辑断裂：
-
❌ 不要对 canvas 元素本身做响应式修改（如
canvasRef.value.width = newWidth后未调用ctx.scale或重置变换，会导致绘图错位） - ❌ 不要在 setup 初期就获取 ctx —— 此时 ref 还未绑定真实 DOM，会得到 null
-
❌ 不要用 reactive 包裹大量点坐标数组 —— 频繁 push 会触发大量依赖通知，改用普通数组 + 手动
triggerRef或仅在关键节点重绘更高效
