自定义hook函数

文章来源:我的博客,欢迎访问,不欢迎攻击,谁攻击谁儿子

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

例如下面的代码中,监听鼠标的点击:

<template>  
  <div class="hook">  
    <h2>当前点击时鼠标的坐标为:x:{{ point.x }},y:{{ point.y }}</h2>  
  </div>  
</template>  
<script setup>  
import { onBeforeMount, onMounted, reactive } from 'vue'  
const point = reactive({  
  x: 0,  
  y: 0  
})  
const saveClick = (event) => {  
  point.x = event.pageX  
  point.y = event.pageY  
}  
onMounted(() => {  
  // 下面的监听如果没有及时销毁,那么及时该组件被销毁了,也会监听的  
  window.addEventListener('click', saveClick)  
})  
// 卸载阶段:  
onBeforeMount(() => {  
// 移除监听  
  /*  
  removeEventListener  接收两个参数,第一个是监听对象,第二个是监听的回调函数,所以上面的 saveClick  最好写成一个变量来接收function  
  * */
window.removeEventListener('click', saveClick)  
})
</script>  

注意

上面的有添加监听,也要有移除,否则即使这个组件被移除了,监听事件仍然存在,
window.removeEventListener('click', saveClick)

那么此时我们的其他组件想要使用这部分的逻辑,此时可以使用hooks:

• 在src下新建hooks的文件夹
• 在该文件夹下新建文件:userPoint.js,注意hooks文件命名一般以use开头
  写下相关代码,并将其要使用的function暴露出去:

import { onBeforeMount, onMounted, reactive } from 'vue'  
  
// 暴露出去  
export default function savePoint () {  
// 实现鼠标打点相关的数据  
    const point = reactive({  
        x: 0,  
        y: 0  
    })  
// 实现鼠标打点的相关方法  
    const saveClick = (event) => {  
        point.x = event.pageX  
        point.y = event.pageY  
    }  
// 相关周期  
    onMounted(() => {  
        // 下面的监听如果没有及时销毁,那么及时该组件被销毁了,也会监听的  
        window.addEventListener('click', saveClick)  
    })  
  
// 卸载阶段:  
    onBeforeMount(() => {  
// 移除监听  
        /*  
        removeEventListener        接收两个参数,第一个是监听对象,第二个是监听的回调函数,所以上面的 saveClick        最好写成一个变量来接收function  
        * */        window.removeEventListener('click', saveClick)  
    })  
    // 要有返回值  
    return point  
}

那么此时的调用就是:

<template>  
  <div class="hook">  
    <h2>当前点击时鼠标的坐标为:x:{{ point.x }},y:{{ point.y }}</h2>  
  </div>  
</template>  
<script setup>  
import usePoint from "@/hooks/usePoint.js"  
let point = usePoint()  
</script>