VueUse.useMouse() 响应式失效的根源与正确引入方案

使用 vueuse 的 usemouse() 时，控制台能实时输出鼠标坐标但模板中始终显示 0，根本原因是 esm 导入链断裂导致响应式对象未被正确识别——`+esm` 自动解析失败，`@vueuse/shared` 等依赖未加载，致使返回的 `x`/`y` 变为普通数字而非 ref。

在 Vue 3 的组合式 API 中，@vueuse/core 的 useMouse() 返回的是两个 Ref 响应式引用（即 x: Ref 和 y: Ref），它们天然支持模板自动解包（如 {{ x }} 等价于 {{ x.value

}}）。但该行为的前提是：x 和 y 必须是真正的 Ref 实例——而你的原始代码中，由于 CDN 的 +esm 解析机制缺陷，@vueuse/core 未能正确加载其内部依赖 @vueuse/shared（提供 reactive、ref 等基础工具），最终导致 useMouse() 内部回退到非响应式降级逻辑，返回了普通数值（number），而非 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 组合式函数在生产环境中的可靠用法。