七、【Vue3】——自定义hook函数

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

前言：自定义hook函数类似与封装一个可复用的组件，只不过它是一个函数，封装的是一个可复用的函数功能，与Vue2中的mixin类似。下面通过一个例子就可以很好理解它了。

• 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。

• 类似于vue2.x中的mixin。

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

  • 注意1:hook函数可以使用Vue3中的组合式API；
  • 注意2:hook函数在组件中使用时，相当于函数中的API方法都移动到相关组件中

通过以下例子进行简单分析：

1. 在src目录下创建一个hooks目录，专门放相关的hook函数方法，我在此处放了一个usePoint.js文件

2. 在usePoint.js文件中写相应公共函数方法，我此处写的是点击鼠标查看相关坐标值，注意要将函数暴露出去，外部才能使用

import {onBeforeMount, onBeforeUnmount, reactive} from 'vue'
export default function () {
    const point = reactive({
        x:0,
        y:0
    })
    function savePoint (event) {
        point.y = event.pageY
        point.x = event.pageX
        console.log('x,y', point.y, point.x)
    }
    onBeforeMount(() => {
        // 监听click事件
        window.addEventListener('click',savePoint)
    })
    onBeforeUnmount(() => {
        window.removeEventListener('click',savePoint)
    })
    return point
}

3. 在要使用的组件中引入并使用即可，相关组合式API方法都可对应引入到组件中

<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
    <h2>{{point}}</h2>
</template>
<script>
    import {ref} from 'vue'
    import usePoint from '../hooks/usePoint'
    export default {
        name: 'Demo',
        setup(){
            //数据
            let sum = ref(0)
            // 引用公共hook函数
            let point = usePoint()
            return {
                sum,
                point
            }
        },
    }
</script>

4. 对应效果图如下：

当然，在工程中复用函数不一定非要用到hook函数