关键在于按职责分层：图层元数据用 reactive 管理，高频坐标用 shallowref 隔离，画布渲染坐标实时计算，撤销重做采用不可变快照而非响应式回滚。
用 reactive 维护画布编辑器的图层与坐标信息，关键不是把所有数据一股脑塞进响应式对象，而是按职责分层、控制粒度、避免过度响应——尤其是坐标这类高频更新字段。
图层列表用 reactive 管理整体结构
图层元数据（id、类型、可见性、zOrder、基础尺寸等）适合放在一个 reactive 对象中，因为它们变更频率低、需跨组件共享、且常被批量操作（如置顶/置底、批量隐藏）：
- 定义为
const layers = reactive([{ id: 'l1', type: 'rect', x: 100, y: 50, width: 200, height: 100, zOrder: 1, visible: true }]) - 所有图层增删、顺序调整、显隐切换都直接修改这个数组，Vue 自动触发视图更新
- zOrder 字段作为层级唯一依据，渲染时按
layers.sort((a, b) => a.zOrder - b.zOrder)排序，不依赖 DOM 顺序或 zIndex 样式
坐标与拖拽状态用 shallowRef 避免深度监听
当用户拖拽某个图层时，x 和 y 每帧可能变化数十次。若这些字段嵌在 reactive(layers) 里，Vue 会逐个属性做 getter/setter 追踪，带来明显性能损耗：
- 把正在拖拽的图层坐标单独抽出来：
const draggingPos = shallowRef({ x: 0, y: 0 }) - 鼠标移动事件中只更新
draggingPos.value.x和.y，不触发 layers 的响应式追踪 - 松开鼠标后，再将最终位置同步回
layers.find(l => l.id === targetId)，这时才触发一次视图更新
画布视图坐标需实时转换，不存为响应式字段
Canvas 或 SVG 画布常支持缩放和平移，此时“逻辑坐标”（设计稿坐标）和“屏幕坐标”（鼠标事件坐标）不同。这些转换结果不应作为响应式状态缓存：
- 缩放比例
scale和偏移量offsetX/offsetY可以是ref，用于控制画布整体变换 - 但每个图层在画布上的实际绘制位置，应在
render或watchEffect中实时计算：const renderX = (layer.x - offsetX) * scale - 避免在 layer 对象里存
renderX这类派生字段，否则容易与源数据不一致
撤销重做靠不可变快照，而非响应式回滚
响应式状态不适合直接用于 undo/redo —— 因为 reactive 对象的引用始终不变，无法区分“前一状态”和“当前状态”：
- 每次关键操作（如移动图层）前，用
JSON.parse(JSON.stringify(layers))或结构克隆生成快照 - 历史栈存的是纯数据快照，不是响应式对象；回退时用新快照替换当前
layers数组 - 这样既保持响应式更新，又确保每步可序列化、可跨端同步
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
