使用Composition APl实现追踪鼠标位置的需求

Composition AP1 对代码组织方式的好处如下：因为 ref 和 computed 等功能都可以从 Vue 中全局引入，所以我们就可以把组件进行任意颗粒度的拆分和组合，这样就大大提高了代码的可维护性和复用性。
以下代码实现了追踪鼠标位置的需求的这样一个封装的函数：

import { onMounted,ref,onUnmounted } from "vue";

export function useMouse(){
    let x = ref(0)
    let y = ref(0)
    function upData(e){
        x.value = e.pageX
        y.value = e.pageY
        console.log(e)
    }
    onMounted(()=>{
        window.addEventListener('mousemove',upData)
    })
    onUnmounted(()=>{
        window.removeEventListener('mousemove',upData)
    })
    return {x,y}
}

在组件的使用中如下：

import {useMouse} from '../ulite/mouserFun'
let {x,y} = useMouse()