为何VueUse.useMouse()值更新但页面不渲染？

你遇到的情况是：使用VueUse的useMouse()获取鼠标坐标时，控制台能正确打印随鼠标移动变化的x、y值，但页面<span>标签内的x、y始终显示0，无法同步更新。

原因分析 #

问题出在你使用的Vue生产环境版本（vue.esm-browser.prod.js）上。生产模式下Vue会进行编译优化，导致模板没有自动识别并解包VueUse返回的Ref对象。虽然Ref的value属性在后台正常更新，但模板无法追踪到响应式变化，因此始终显示初始值0。

解决方案 #

方案1：模板中手动访问Ref的.value属性

直接在模板里修改为读取Ref的value属性，强制获取最新值：

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

方案2：改用Vue开发环境版本

如果处于开发阶段，可将importmap中的Vue替换为开发版CDN链接，开发版不会进行激进优化，会自动解包Ref对象：

<script type="importmap">
{ "imports" : {
    "vue"               : "https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.esm-browser.js",
    "@vueuse/core"      : "https://cdn.jsdelivr.net/npm/@vueuse/core@10.2.1/+esm"
} }
</script>

验证说明 #

你控制台能打印出变化的x.value和y.value，说明useMouse()本身功能正常，问题仅存在于模板对Ref的识别环节，上述方案均可解决。

内容的提问来源于stack exchange，提问作者XJ.Chen