组合式函数（封装/复用）

组合式函数（封装/复用）
实例：获取鼠标点击的位置坐标

import {reactive,onBeforeUnmount,onMounted } from 'vue'

const getMousePoint = () => {
    let point = reactive({
        x: 0,
        y: 0,
    })
    const update=(e)=>{
        
        point.x=e.x;
        point.y=e.y;

    }
    onMounted(()=>{
        window.addEventListener('mousedown',update)
    })
    onBeforeUnmount(()=>{
        window.removeEventListener('mousedown',update)

    })
    return point
}
export  default getMousePoint

<script setup>
    import useMousePoint from './components/useMousePoint'
    const point=useMousePoint()
</script>
<template>
    <h3>获取鼠标点击的位置</h3>
    <h2>x:{{point.x}},y:{{point.y}}</h2>
</template>