08_Vue3 自定义hook函数

目录

自定义hook函数

例如：

src下新建文件夹 hooks

创建js文件，文件名为 usePoint.js

在 App.vue 中

Demo.vue 组件中

Test.vue 组件中

---

自定义hook函数

• 什么是 hook ?——本质是一个函数，把 setup 函数中使用的 Composition API 进行了封装。
• 类似于 vue2 中的 mixin。
• 自定义hook的优势：复用代码，让 setup 中的逻辑更清楚易懂。

例如：

src下新建文件夹 hooks

创建js文件，文件名为 usePoint.js

在 usePoint.js 中封装一个鼠标点击“打点”的函数 savePoint

import {reactive,onMounted,onBeforeUnmount} from 'vue'
function savePoint(){
    //实现鼠标‘打点’相关的数据
    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)
    })

    //一定要返回，否则无法使用point
    return point
}

export default savePoint

在 App.vue 中

用到了两个组件，分别是Demo.vue 和 Test.vue

Demo.vue 组件中

引入封装好的 usePoint.js ，可以直接使用返回的 point

Test.vue 组件中

引入封装好的 usePoint.js ，可以直接使用返回的 point