使用 vueuse 的 `usemouse()` 时，控制台能实时输出鼠标坐标但模板中始终显示 `0`，根本原因在于通过 jsdelivr 的 `+esm` 路径引入会破坏内部依赖（尤其是 `@vueuse/shared`），导致响应式对象未被正确识别，需显式声明所有依赖模块。
在 Vue 3 的组合式 API 中，@vueuse/core 的 useMouse() 返回的是基于 ref() 的响应式对象（即 { x: Ref
根本问题出在 CDN 引入方式：
https://cdn.jsdelivr.net/npm/@vueuse/core@11.2.0/+esm 这类 +esm 路径是 jsDelivr 提供的自动转换服务，它尝试将 CommonJS 包转为 ESM，但 @vueuse/core 内部强依赖 @vueuse/shared（提供 tryOnMounted、reactify 等基础工具），而 +esm 模式无法自动解析并加载该 peer 依赖。结果是 useMouse() 函数虽可调用，但其内部用于同步 DOM 事件与响应式状态的关键逻辑（如 reactive 包装、watch 注册）因缺失 shared 工具而降级或静默失败——返回的 x/y 实际是未被 Vue 正确追踪的普通 Ref，故模板无法触发更新。
✅ 正确解法：显式、完整地声明所有必需的 ESM 入口文件，绕过 +esm 的不可靠自动转换：
<script async src="https://cdn.jsdelivr.net/npm/es-module-shims@2/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@11.2.0/index.min.mjs",
"@vueuse/shared": "https://cdn.jsdelivr.net/npm/@vueuse/shared@11.2.0/index.min.mjs"
}
}
</script>
<div id="app01">
<span>mouse : {{ x }} | {{ y }}</span>
</div>
<script type="module">
import * as Vue from 'vue';
import * as VueUse from '@vueuse/core';
const app = Vue.createApp({
setup() {
const { x, y } = VueUse.useMouse();
return { x, y }; // ✅ 直接返回 ref，Vue 模板自动解包
}
});
app.mount('#app01');
</script>⚠️ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- vue-demi 是必需的 polyfill，确保 @vueuse/* 在不同 Vue 版本间兼容；
- 所有 @vueuse/* 子包必须使用 .min.mjs 后缀的预构建 ESM 文件（而非源码 .ts 或未处理的 .js），这是官方推荐的 CDN 使用方式；
- 不要混用 +esm 与手动指定路径——二者机制冲突；
- 若项目已使用 Vite/Webpack，强烈建议改用 npm install @vueuse/core 本地安装，避免 CDN 不确定性。
总结：useMouse() 本身完全响应式，问题永远不在 Hook，而在环境配置。确保依赖图完整、ESM 入口明确，即可让 x/y 在模板中实时响应鼠标移动——这才是 VueUse “开箱即用”体验的真正前提。
