VueJs中如何自定义hooks(组合式)函数

前言

在Vue当中,一个非常重要的功能就是组件的复用,编写Vue组件,更多的也是在拼装组件,将页面的各个功能进行模块化

便于维护和管理,而在项目里,有些页面中的组件的逻辑功能是一样的,如果没有进行功能逻辑的复用,那么每个页面都需要重复的写一遍

在Vue当中各个组件是保持独立的,如果想要复用页面当中的某个组件的逻辑,也就是复用组件逻辑的代码

那么可以抽离逻辑,放到一个公共的地方管理的,方便在其他地方调用,达到复用代码和逻辑的目的

在Vue2当中可以使用mixin,但使用这个有很多缺点,而在Vue3中引入了组合式函数,也就是自定义hooks就很好的解决了之前的问题

01

自定义hooks

解释: 本质上是一个函数,把setup函数中使用的composition API进行了封装,复用有状态逻辑的函数

类似Vue2的mixin

优势: 自定义hooks,复用代码,让setup中的逻辑更加清除易懂

02

点击屏幕记录鼠标位置

现在有一个需求:就是记录用户点击浏览器的位置,显示到浏览器上,在组件中使用组合式API实现点击鼠标跟踪功能,示例代码如下所示

新建一个clickPoint.vue

<script setup>
import { ref,onMounted,onUnmounted } from 'vue';

const x = ref(0); // 坐标x的值
const y = ref(0); // 坐标y的值

function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
}
onMounted(() =&