Vue3学习：自定义hook函数

hook—— 本质是一个函数，把setup函数中使用的Composition API(组合式API)进行了封装

---

鼠标点击页面，获取坐标

但是为了普适性，demo.vue得写在hook里面

<template>
    <h2>我是Demo1组件</h2>
    
    <h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
    import {ref,reactive,onMounted,onBeforeUnmount} from 'vue'
    export default {
        name: 'Demo1',
        setup(){
            //数据
            let sum = ref(0)
            let point=reactive({
                x:0,
                y:0
            })
    //实现鼠标“打点”相关的方法
            function savepoint(event) {
                point.x=event.pageX
                point.y=event.pageY
                console.log(event.pageX,event.pageY)
                
            }
        //实现鼠标“打点”相关的生命周期钩子
            onMounted(()=>{
                window.addEventListener('click', savepoint)
            })
            onBeforeUnmount(() => {
                window.removeEventListener('click', savepoint)
            })

            //返回一个对象（常用）
            return {sum,point}
        }
    }
</script>

创建文件夹hooks

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){//暴露了函数
    //实现鼠标“打点”相关的数据
    let point = reactive({
        x:0,
        y:0
    })

    //实现鼠标“打点”相关的方法
    function savePoint(event){
        point.x = event.pageX
        point.y = event.pageY
        console.log(event.pageX,event.pageY)
    }

    //实现鼠标“打点”相关的生命周期钩子
    onMounted(()=>{
        window.addEventListener('click',savePoint)
    })

    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)
    })

    return point//点数据
}

demo组件引入功能：

<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
    <hr>
    <h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
    import {ref} from 'vue'
    import usePoint from '../hooks/usePoint'
    export default {
        name: 'Demo',
        setup(){
            //数据
            let sum = ref(0)
            let point = usePoint()//暴露的是函数
            

            //返回一个对象（常用）
            return {sum,point}
        }
    }
</script>

test组件 引入知道鼠标点击的位置的功能，引入

<template>
    <h2>我是Test组件</h2>
    <h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
    import usePoint from '../hooks/usePoint'
    export default {
        name:'Test',
        setup(){
            const point = usePoint()
            return {point}
        }
    }
</script>

hook类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。