17370845950

使用 vueuse 的 `usemouse()` 时，控制台能正常输出鼠标坐标但模板中始终显示 `0`，根本原因是 cdn 提供的 `+esm` 构建版本未正确解析依赖（尤其是 `@vueuse/shared`），导致响应式对象未被 vue 正确追踪。

在基于 CDN 的纯前端 Vue 应用中（无构建工具），直接通过 https://cdn.jsdelivr.net/npm/@vueuse/core@x.x.x/+esm 引入 VueUse 会导致模块解析失败——+esm 是 jsDelivr 的自动转换机制，它无法智能处理 @vueuse/core 对 @vueuse/shared 等内部包的深度依赖，最终使 useMouse() 返回的 x 和 y 变量虽为 ref 实例，却因依赖链断裂而失去响应式连接：模板无法触发更新，{{x}} 始终渲染初始值 0。

✅ 正确做法是显式声明所有依赖模块，并使用官方推荐的 .min.mjs 生产就绪版本（已预构建、零外部依赖）：

  mouse : {{ x }} | {{ y }}

? 关键要点：

• 禁用 +esm：@vueuse/core@x.x.x/+esm 在 CDN 场景下不可靠，务必改用 index.min.mjs；
• 显式导入 @vueuse/shared：它是 @vueuse/core 的底层响应式工具集，缺失将导致 ref 不被 Vue 识别；
• 确保 vue-demi 版本匹配：Vue 3 项目需使用 vue-demi@0.14+ 的 v3 兼容版；
• 无需手动 .value：模板中 {{x}} 直接访问即可，Vue 会自动解包 ref。

? 补充验证：可在 setup 中添加 console.log(x, y) —— 若输出为 RefImpl { value: 123 }，说明响应式对象创建成功；若为普通数字或 undefined，则引入仍存在问题。推荐始终以 VueUse 官方 CDN 指南 为准，避免依赖非标准路径。