使用 vueuse 的 usemouse() 时，控制台能实时输出鼠标坐标但模板中始终显示 0，根本原因是 esm 导入链断裂导致响应式对象未被正确识别——`+esm` 自动解析失败，`@vueuse/shared` 等依赖未加载，致使返回的 `x`/`y` 变为普通数字而非 ref。
在 Vue 3 的组合式 API 中，@vueuse/core 的 useMouse() 返回的是两个 Ref
这解释了为何 console.log(x.value) 在定时器中看似“有效”（实则是读取了已失效的 .value 属性，JS 不报错但值恒为初始值 0），而模板中 {{x}} 完全无更新——因为 Vue 模板仅对 Ref、Reactive 等响应式类型进行依赖追踪，对原始数字零追踪。
✅ 正确解决方案是显式声明所有关键依赖的 ESM 入口，绕过 +esm 的不可靠自动解析：
mouse : {{ x }} | {{ y }}
? 关键要点总结：
立即学习“前端免费学习笔记（深入）”；
- 永远不要依赖 +esm 后缀：jsDelivr 的 +esm 是启发式重写，对多层依赖（如 @vueuse/core → @vueuse/shared）极易失败；
- 显式导入 @vueuse/shared：它是 @vueuse/core 的底层响应式基石，缺失将导致所有组合函数降级；
- 优先使用 .min.mjs 入口：CDN 提供的 index.min.mjs 是预构建的 ESM 模块，兼容性与稳定性远超 +esm 动态解析；
- 验证是否生效：在浏览器控制台执行 app._context.provides（或检查组件实例的 setupState）可确认 x 是否为 RefImpl 实例。
遵循上述配置后，鼠标移动时 将实时响应更新，useMouse() 的响应式能力完全恢复——这才是 VueUse 组合式函数在生产环境中的可靠用法。
