vue3中的hook函数

一、什么是hook

 hook本质是一个函数，把setup函数中使用的Composition API（组合式API）进行了封装，类似于vue中的mixin。

自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂。

我们用获取当前鼠标的坐标这个例子来说明：

二、未封装hook前的代码

三、封装后的代码

（1）组件中（PointView.vue）

（2）hook中（usePoint.js）

import { onBeforeUnmount, onMounted, reactive } from 'vue';
// 获取鼠标当前坐标
export default function() {
    // 数据
    let point = reactive({
        x: 0,
        y: 0
    })
    
    // 方法
    function savePoint(e) {
        point.x = e.pageX
        point.y = e.pageY
        console.log(point.x, point.y);
    }
    
    onMounted(() => {
        window.addEventListener('click', savePoint)
    })
    
    onBeforeUnmount(() => {
        window.removeEventListener('click', savePoint)
    })

    // 返回值
    return point
}