vue3 Hooks函数使用及常用utils封装

hooks 是什么

vue3使用了composition API，我们可自定义封装hooks，达到复用，在Vue2中采取的mixins，对mixins而言， hooks更清楚复用功能代码的来源, 更清晰易懂。

简单来说：hooks 就是函数的一种写法，就是将文件的一些单独功能的 js 代码进行抽离出来进行封装使用 

 自定义 hook 需要满足的规范

具备可复用功能，才需要抽离为 hooks 独立文件

函数名前缀加上use开头，形如: useXX

合理利用Vue提供的响应式函数及生命周期

暴露出 变量 或 方法 提供外部需要时使用

 Hooks 常用 工具

src/hooks/index.ts

倒计时hooks 

import { ref, Ref, onBeforeMount } from 'vue';/***  倒计时hooks*  @param {Number} second 倒计时秒数*  @return {Number} count 倒计时秒数*  @return {Function} countDown 倒计时函数*  @example*  const { count, countDown } = useCountDown()*  countDown(60)*  <div>{{ count }}</div>*/export function useCountDown() {// 定义函数参数和返回值类型const count: Ref<number> = ref(0);const timer: Ref<NodeJS.Timeout | null> = ref(null);const countDown = (second: number, callback?: () => void) => {if (count.value === 0 && timer.value === null) {// 如果提供了回调函数，则调用它if (callback) callback();count.value = Number(second);timer.value = setInterval(() => {count.value--;if (count.value === 0) {clearInterval(timer.value!);timer.value = null;}}, 1000);}};onBeforeMount(() => {// 确保 timer 有值再清除timer.value && clearInterval(timer.value);});return {count,countDown,};
}

<template><button :disabled="count !== 0" @click="countDown(3, logCountdown)">倒计时剩余 {{ `${count}秒` }} </button>
</template><script lang="ts" setup name="HomePage">import { useCountDown } from '@/hooks';// 倒计时const { count, countDown } = useCountDown();const logCountdown = () => {console.log('触发倒计时回调函数');};
</script>

防抖hooks

import { ref, Ref, onBeforeMount } from 'vue';/*** 防抖hooks* @params {Function} fn  需要防抖的函数 delay 防抖时间* @returns {Function} debounce 防抖函数* @example* const { debounce } = useDebounce()* const fn = () => { console.log('防抖') }* const debounceFn = debounce(fn, 1000)* debounceFn()*/// 防抖函数的类型
interface DebounceFunction {(fn: (...args: any[]) => void, delay: number): (...args: any[]) => void;
}export function useDebounce(): { debounce: DebounceFunction } {const debounce: DebounceFunction = (fn, delay) => {let timer: ReturnType<typeof setTimeout> | null = null;return function (this: any, ...args: any[]) {if (timer) clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, args);}, delay);};};return { debounce };
}

<template><button @click="debounceClick">防抖点击</button>
</template><script lang="ts" setup name="HomePage">import { useDebounce } from '@/hooks';// 防抖const { debounce } = useDebounce();const fn = () => {console.log('取消点击一秒后打印');};const debounceClick = debounce(fn, 1000);
</script>

节流hooks

import { ref, Ref, onBeforeMount } from 'vue';/*** 节流hooks* @params {Function} fn  需要节流的函数 delay 节流时间* @returns {Function} throttle 节流函数* @example* const { throttle } = useThrottle()* const fn = () => { console.log('节流') }* const throttleFn = throttle(fn, 1000)* throttleFn()*/// 节流函数的类型
interface ThrottleFunction {(fn: (...args: any[]) => void, delay: number): (...args: any[]) => void;
}export function useThrottle(): { throttle: ThrottleFunction } {const throttle: ThrottleFunction = (fn, delay) => {let timer: ReturnType<typeof setTimeout> | null = null;return function (this: any, ...args: any[]) {if (!timer) {timer = setTimeout(() => {fn.apply(this, args);timer = null;}, delay);}};};return { throttle };
}

<template><button @click="throttleClick">节流点击</button>
</template><script lang="ts" setup name="HomePage">import { useThrottle } from '@/hooks';const fn = () => {console.log('一秒内只打印一次');};const { throttle } = useThrottle();const throttleClick = throttle(fn, 1000);
</script>