Vue.js 3鼠标移动时Label不更新坐标问题求助

问题出在响应式变量的赋值方式错误：你用ref()创建了mouse_x和mouse_y这两个响应式变量，但在handleMouseMove函数里直接用mouse_x = x这种方式赋值，会把原本的ref对象直接替换成普通数值，破坏了Vue的响应式追踪机制——此时mouse_x不再是响应式对象，所以视图不会更新，但控制台能正常打印数值（因为变量本身确实被改成了新的坐标值）。

修复后的代码 #

<script setup lang="ts">
import { onMounted, ref } from 'vue';

let mouse_x = ref(0)
let mouse_y = ref(0)

onMounted(()=>{
    drawline()
})

function drawline() {
    let canvas = document.getElementById("myCanvas");
    if (!canvas) return; // 增加空值判断避免报错
    let ctx = canvas.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke();
}

function handleMouseMove(e) {
    let x = e.clientX;
    let y = e.clientY;

    // 关键修复：通过.value修改ref变量的内部值，保留响应式
    mouse_x.value = x;
    mouse_y.value = y;
    console.log(x,"," ,y)
}

function handleMouseClick(e) {
    console.log(e)
}
</script>

<template>
    <div>
        <canvas id="myCanvas" width="500" height="300" @mousemove="handleMouseMove" @click="handleMouseClick"> </canvas>
        <form>
            <label> X坐标: {{ mouse_x }}</label>
            <label> Y坐标: {{ mouse_y }}</label>
        </form>
    </div>
</template>

补充说明 #

在Vue 3的<script setup>语法中：

• 用ref()创建的响应式变量，在脚本逻辑里必须通过.value访问或修改其值，这样才能触发Vue的响应式更新。
• 在模板中使用时，Vue会自动对ref变量进行解包，所以直接写{{ mouse_x }}即可，不需要加.value。

内容的提问来源于stack exchange，提问作者tauruswang