vue里改鼠标样式，改鼠说难不难，标样说简单也藏着几个坑。改鼠直接改CSS的标样cursor属性当然行，但一旦涉及到拖拽、改鼠跨区域联动，标样或者想搞点自定义动画光标，改鼠就得动真格了。标样

最基础的改鼠做法，给元素绑个class，标样写上cursor: pointer或者cursor: grab，改鼠完事。标样但vue的改鼠响应式系统在这里有个微妙之处——当你用:style动态绑定cursor时，值的标样变化会触发重渲染，但浏览器对cursor的改鼠更新却不一定即时。你快速切换状态，光标可能还停留在上一帧的样式上，视觉上就卡顿一下。

我遇到过实际案例：一个白板应用，用户拖动图形时，光标要从default变成grabbing。我直接在mousedown时改data里的cursor值，结果在快速连续点击时，光标偶尔会闪回默认样式。排查半天，发现是vue的异步更新队列在作祟——DOM还没来得及patch，浏览器已经读了旧的cursor值。解决方式很简单，用nextTick包一下，或者干脆用原生style直接操作：el.style.cursor = 'grabbing'。这种场景下，绕过vue的响应式反而更干净。

再说自定义光标。vue组件里用CSS的cursor: url('xxx.png'), auto，图片要小，建议32x32以内，否则浏览器可能忽略。但有个坑——如果你在mousemove事件里频繁更新光标位置（比如做一个跟随鼠标的十字准星），用CSS背景图加position: fixed的div去模拟，性能远好过改cursor属性。因为cursor的切换会强制浏览器重新计算命中测试，高频触发时CPU占用飙升。我测过，每秒60次更新cursor，Chrome的渲染进程占用能到30%以上，而用transform移动一个div，几乎无压力。

另一个实用场景：拖拽排序。vue-draggable这类库内部处理了光标，但你手动实现时，要注意拖拽过程中鼠标移出元素边界，cursor会变回默认。这时候需要在document级别监听dragover或mousemove，强制设置document.body.style.cursor。记得在drop或mouseup时清理，否则光标会卡在“抓取”状态不放。

还有个冷门细节：cursor: none在vue里配合canvas画图工具很爽。隐藏默认光标，用一个自定义的圆点跟随，画布上就只看到笔触。但要注意，如果你在mousemove里用requestAnimationFrame更新圆点位置，别把事件监听器绑在组件销毁后还不解绑，vue的beforeUnmount钩子里记得removeEventListener。我见过同事忘了这茬，页面切走再回来，光标样式全乱套。

最后提一下v-if和cursor的交互。组件销毁重建时，如果之前在document上设置了全局cursor样式，不会自动恢复。你得在onUnmounted里显式重置为''。否则用户鼠标移到其他区域，还是残留着旧光标，特别诡异。

一句话总结：vue改鼠标样式，别过度依赖响应式，该直接操作DOM就操作。性能敏感的场景，用元素模拟代替CSS cursor。边界情况记得清理，不然就是给自己埋雷。

(责任编辑：休闲)