使用 vueuse 的 usemouse() 时，控制台能实时输出鼠标坐标但模板中始终显示 0，根本原因是 esm 导入链断裂导致响应式对象未被正确识别——`+esm` 自动解析失败，`@vueuse/shared` 等依赖未加载，致使返回的 `x`/`y` 变为普通数字而非 ref。
在 Vue 3 的组合式 API 中，@vueuse/core 的 useMouse() 返回的是两个 Ref<number> 响应式引用（即 x: Ref<number> 和 y: Ref<number>），它们天然支持模板自动解包（如 {{ 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 的不可靠自动解析：
<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 实例。
遵循上述配置后，鼠标移动时 <span> 将实时响应更新，useMouse() 的响应式能力完全恢复——这才是 VueUse 组合式函数在生产环境中的可靠用法。
