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 的不可靠自动解析：

AI神器大全

AI工具集合导航站

下载

<script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js"></script>
<script type="importmap">
{
  "imports": {
    "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi@0.14.10/lib/v3/index.min.mjs",
    "vue": "https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.esm-browser.prod.js",
    "@vueuse/core": "https://cdn.jsdelivr.net/npm/@vueuse/core@10.10.0/index.min.mjs",
    "@vueuse/shared": "https://cdn.jsdelivr.net/npm/@vueuse/shared@10.10.0/index.min.mjs"
  }
}
</script>

<div id="app01">
  <span>mouse : {{ x }} | {{ y }}</span>
</div>

<script type="module">
import { createApp } from 'vue';
import { useMouse } from '@vueuse/core';

createApp({
  setup() {
    const { x, y } = useMouse(); // ✅ 现在 x 和 y 是真正的 Ref<number>
    return { x, y };
  }
}).mount('#app01');
</script>

? 关键要点总结：

立即学习“前端免费学习笔记（深入）”；

• 永远不要依赖 +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 组合式函数在生产环境中的可靠用法。