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

使用 vueuse 的 `usemouse()` 时，控制台能实时输出鼠标坐标但模板中始终显示 `0`，根本原因在于通过 jsdelivr 的 `+esm` 路径引入会破坏内部依赖（尤其是 `@vueuse/shared`），导致响应式对象未被正确识别，需显式声明所有依赖模块。

在 Vue 3 的组合式 API 中，@vueuse/core 的 useMouse() 返回的是基于 ref() 的响应式对象（即 { x: Ref, y: Ref }）。理论上只要将 x 和 y 正确暴露给模板，就能实现自动更新。但你遇到的「模板中始终为 0，而 console.log(x.value, y.value) 却能正常变化」这一矛盾现象，并非 Vue 响应式机制失效，而是 ESM 构建产物加载失败导致的“伪响应式”。

根本问题出在 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 的不可靠自动转换：

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

⚠️ 关键注意事项：

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

• 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 “开箱即用”体验的真正前提。