vue3-自定义hook

你眼中的光

2023-06-16 158 阅读1分钟

一、定义

通过自定义hook方法，实现组合式API功能实现的复用。

二、使用

创建hooks目录，创建需要使用的文件，如usePoint.js

//创建usePoint
export default function(){
    let point=reacitve({
        x:0,
        y:0
    })
    function savePoint(event){
        point.x=event.pageX
        point.y=event.pageY
    }
    onMounted(()=>{
        window.addEventListener('click',savePoint)
    })
    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)
    })
    return point
}

usePoint的使用

//使用usePoint
<template>
    <h2>当前鼠标点击的坐标为：x：{{point.x}},y：{{point.y}}</h2>
</template>

<script>
    import usePoint from '../hooks/usePoint'
    export default{
    setup(){
        let point = usePoint()
        return {
            point
        }
    }
}
</script>