VUE3中＜script setup＞中插值使用

这是记录我自己的错误，求大神留手

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const x = ref(0)
const y = ref(0)

function update(event) {
  x.value = event.pageX
  y.value = event.pageY
}

onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>
 

这是从vue3官方文档的组合式Api，在<script setup>中无返回值，都是响应式赋值例如ref()等

所以如果在<template>中进行插值的话，x.value进行复制到x，然后通过ref进行响应