使用 vueuse 的 `usemouse()` 时，控制台能正常输出鼠标坐标但模板中始终显示 `0`，根本原因是 cdn 提供的 `+esm` 构建版本未正确解析依赖（尤其是 `@vueuse/shared`），导致响应式对象未被 vue 正确追踪。
在基于 CDN 的纯前端 Vue 应用中（无构建工具），直接通过 https://cdn.jsdelivr.net/npm/@vueuse/core@x.x.x/+esm 引入 VueUse 会导致模块解析失败——+esm 是 jsDelivr 的自动转换机制，它无法智能处理 @vueuse/core 对 @vueuse/shared 等内部包的深度依赖，最终使 useMouse() 返回的 x 和 y 变量虽为 ref 实例，却因依赖链断裂而失去响应式连接：模板无法触发更新，{{x}} 始终渲染初始值 0。
✅ 正确做法是显式声明所有依赖模块，并使用官方推荐的 .min.mjs 生产就绪版本（已预构建、零外部依赖）：
<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/lib/v3/index.min.mjs",
"vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js",
"@vueuse/core": "https://cdn.jsdelivr.net/npm/@vueuse/core@10.7.2/index.min.mjs",
"@vueuse/shared": "https://cdn.jsdelivr.net/npm/@vueuse/shared@10.7.2/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();
return { x, y };
}
}).mount('#app01');
</script>? 关键要点：
- 禁用 +esm：@vueuse/core@x.x.x/+esm 在 CDN 场景下不可靠，务必改用 index.min.mjs；
- 显式导入 @vueuse/shared：它是 @vueuse/core 的底层响应式工具集，缺失将导致 ref 不被 Vue 识别；
- 确保 vue-demi 版本匹配：Vue 3 项目需使用 vue-demi@0.14+ 的 v3 兼容版；
- 无需手动 .value：模板中 {{x}} 直接访问即可，Vue 会自动解包 ref。
? 补充验证：可在 setup 中添加 console.log(x, y) —— 若输出为 RefImpl { value: 123 }，说明响应式对象创建成功；若为普通数字或 undefined，则引入仍存在问题。推荐始终以 VueUse 官方 CDN 指南 为准，避免依赖非标准路径。
立即学习“前端免费学习笔记（深入）”；
