Vue3 自定义Hooks函数的封装

1、如何理解vue3中的自定义hooks

在Vue 3中，自定义hooks允许开发者封装和重用逻辑代码。自定义hooks是使用Composition API时创建的函数，这些函数可以包含任意的组合逻辑，并且可以在多个组件之间共享。

自定义hooks通常遵循这样的命名约定：以 use 开头，后面跟上hook的名称，这样做可以清晰地表明它是一个自定义的hooks。

2、hooks与utils的区别

相同点：

        通过 hooks 和 utils 函数封装， 可以实现组件间共享和复用，提高代码的可重用性和可维护性。

不同点：  

        01.表现形式不同： hooks 是在 utils 的基础上再包一层组件级别的东西(钩子函数等)；utils 一般用于封装相应的逻辑函数，没有组件的东西；

        02.数据是否具有响应式： hooks 中如果涉及到 ref，reactive，computed 这些 api 的数据，是具有响应式的；而 utils 只是单纯提取公共方法就不具备响应式；

        03.作用范围不同： hooks 封装，可以将组件的状态和生命周期方法提取出来，并在多个组件之间共享和重用；utils 通常是指一些辅助函数或工具方法，用于实现一些常见的操作或提供特定功能。

 3、自定义hooks封装规范：

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

        02、函数名/文件名以 use 开头，形如: useXX

        03、引用时将响应式变量或者方法显式解构暴露出来；

4、创建自定义hooks

创建自定义hooks非常简单，你只需要定义一个函数，这个函数内部可以包含你需要重用的任何逻辑：

// useCounter.js
export function useCounter(initialValue = 0) {const count = ref(initialValue);function increment() {count.value++;}function decrement() {count.value--;}// 返回一个对象，包含响应式状态和函数return { count, increment, decrement };
}

5、使用自定义hooks

在组件中使用自定义hooks就像使用Vue提供的内置hooks一样：

<template><div><button @click="decrement">-</button><span>{{ count }}</span><button @click="increment">+</button></div>
</template><script setup>import { useCounter } from './useCounter.js';const { count, increment, decrement } = useCounter(10);
</script>

6、实际开发中常用的hooks案例

6.1、验证码倒计时

~useCountDown.js

/*** 验证码倒计时：* 说明：这个自定义hook可以被导入并在Vue组件中使用，以实现验证码倒计时的功能。通过调* 用 countDown 函数并传入初始秒数，可以启动倒计时，倒计时的当前秒数将通过 count 响应* 式引用存储并更新。当倒计时结束时，可以自动执行传入的回调函数。* @param {Number} second 倒计时秒数* @return {Number} count 倒计时秒数* @return {Function} countDown 倒计时函数* @example* cosnt { count, countDown } = useCountDown()* countDown(60)* <div>{{ count }}</div>*/import { ref, onBeforeMount } from 'vue'export function useCountDown() {// 存储倒计时的当前秒数const count = ref(0)// 设置定时器const timer = ref(null)/** * countDown 函数，它接收两个参数：*      second（可选）：倒计时的初始秒数，默认为60。*      ck（可选）：倒计时结束时调用的回调函数，默认为空函数。* @param {*} second * @param {*} ck */const countDown = (second= 60, ck = () => {}) => {// 即倒计时未启动或已结束if (count.value === 0 && timer.value === null) {ck()count.value = secondtimer.value = setInterval(() => {count.value--if (count.value === 0) {clearInterval(timer.value)timer.value = null}}, 1000)}}// 在组件挂载之前onBeforeMount(() => {//  timer.value 存在（即倒计时正在运行），就清除定时器timer.value && clearInterval(timer.value)})return {count,countDown}
}

组件内使用：

import { useCountDown } from '../../hooks/useCountDown'// 1、验证码倒计时hooks
const { count, countDown } = useCountDown()
const sendCode = () => {console.log('发送了验证码');
}

<!-- 1、验证码倒计时 --><h4>验证码倒计时</h4><button :disabled="count != 0" class="code-btn" @click="countDown(5, sendCode)">发送验证码</button><span>倒计时：{{ count || 0 }}</span><br>

 6.2、防抖函数

~useDebounce.js

/*** 防抖* 说明：防抖是一种限制函数执行频率的技术，确保函数在指定的时间间隔 delay 后执行，* 如果在该间隔内再次触发，则重新计时。* @param {Function} fn 需要防抖的函数  delay 防抖时间* @return {Function} debounce 防抖函数* @example* const { debounce } = useDebounce()* const fn = () => { console.log('防抖' }* const debounceFn = debounce(fn, 1000)* debounceFn()*/import { ref } from 'vue'export function useDebounce(fn, delay) {const debounce = (fn, delay) => {// 设置定时器let timer = null// 返回一个匿名函数return () => {if (timer) clearInterval(timer)// 设置一个新的 setTimeout 定时器，等待 delay 毫秒后执行传入的 fn 函数timer = setTimeout(() => {// 确保 fn 函数能够接收到正确的 this 上下文和参数fn.apply(this, arguments)}, delay);}}// 用于生成具体的防抖函数return { debounce}
}

 组件内使用：

import { useDebounce } from '@/hooks/useDebounce'// 2、防抖
const { debounce } = useDebounce()  // 引入防抖函数
const debouFn = () => {console.log('防抖——点击了按钮，1秒执行一次');
}
const debounceClick = debounce(debouFn, 1000)

    <!-- 2、防抖 --><h4>防抖函数</h4><button @click="debounceClick">防抖点击</button><br>

 6.3、节流函数

~useThrottle.js

/*** 节流* 说明：节流是一种限制函数执行频率的技术，确保函数在指定的时间间隔 delay 内* 最多只执行一次，无论触发了多少次。* @param {Function} fn 需要节流的函数  delay 节流时间* @return {Function} throttle 节流函数* @example* const { throttle } = useThrottle()* const fn = () => { console.log('节流') }* const throttleFn = throttle(fn, 1000)* throttleFn()* 注意事项：*      timer 变量用于确保在节流的时间间隔 delay 内最多只执行一次函数 fn。*      使用 apply 方法是为了确保当 fn 被执行时，能够使用调用 throttle 时的 this 上下文和参数。*/export function useThrottle(fn, delay) {const throttle = (fn, delay) => {let timer = null// 返回一个匿名函数，该函数将在实际调用节流函数时执行return function () {// timer 不存在（即前一个节流操作尚未结束）if (!timer) {timer = setTimeout(() => {// 确保 fn 函数能够接收到正确的 this 上下文和参数fn.apply(this, arguments)// 执行完 fn 后，将 timer 设置回null，以便下一次可以再次触发节流timer = null}, delay)}}}return {throttle}
}

 组件内使用：

import { useThrottle } from '@/hooks/useThrottle'// 3、节流
const { throttle } = useThrottle()  // 引入节流函数throttle
const  throFn = () => {console.log('节流——点击按钮，5秒内只执行一次');
}
const throttleClick = throttle(throFn, 5000)

    <!-- 3、节流 --><h4>节流函数</h4><button @click="throttleClick">节流点击</button>

 6.4 缩放(scale)大屏适配hooks的封装

~useSelfAdaption.js

/*** 缩放（scale）的方式是一种简单直接的大屏适配方案，其主要思路是通过* 改变整个页面的缩放比例来适应不同分辨率的屏幕。这种方案的核心在于将* 页面整体进行缩放，以保持页面布局的完整性和一致性。* * 缩放（Scale）适配方案思路：*      获取屏幕尺寸： 首先，通过JavaScript获取当前设备屏幕的宽度（或高度）。*      计算缩放比例： 然后，将获取到的屏幕尺寸与设计稿的基准尺寸进行比较，计算出缩放比例。*      应用缩放： 最后，将计算出的缩放比例应用到整个页面上，从而实现页面的缩放适配。* * @date 2024-6-3* @return {Number} scale 组件可以使用scale来响应屏幕尺寸的变化* @example* const { scale } = useSelfAdaption()* <div :style="{ transform: `scale(${scale})` }">*      <!-- Your content here -->* </div>*/import { ref, onMounted, onUnmounted } from 'vue'export function useSelfAdaption() {const scale = ref(1)const setScale = () => {const screenWidth = window.innerWidth// 设计稿基准宽度const baseWidth = 750  //750, 1190, 1920, 根据实际情况设定// 计算当前屏幕宽度与基准宽度的比例，并赋值给scalescale.value = screenWidth/baseWidthconsole.log('cale:', scale.value);// 设置body的CSS变换属性，根据scale的值进行缩放document.body.style.transform = `scale(${scale.value})`}onMounted(() => {// 初次挂载时调用setScale函数，以确保页面按照当前屏幕尺寸正确缩放setScale()// 当窗口大小改变时，触发setScale函数。window.addEventListener('resize', setScale)})onUnmounted(() => {// 移除之前添加的resize事件监听器，避免内存泄漏。window.removeEventListener('resize', setScale)})return {scale}
}

组件内使用：

import { useSelfAdaption } from '../../hooks/useSelfAdaption'   // 引入自适应hooks// 5、自适应
/*** <div :style="{ transform: `scale(${scale})` }"></div>*/
const { scale } = useSelfAdaption()

<template><!-- 5、缩放(scale)屏幕适配  :style="{ transform: `scale(${scale})` }" --><div class="container" :style="{ transform: `scale(${scale})` }"><!-- Your template content --></div>
</template>

 6.5 XXX (后面遇到需要封装的hooks再更新，请持续关注。)

 7、注意事项

• 自定义hooks应该专注于执行特定的任务，避免在一个hooks中做太多事情。
• 保持自定义hooks的命名直观且描述性强，这样其他开发者可以快速理解hooks的用途。
• 由于自定义hooks是函数，它们可以接收参数，这使得它们更加灵活和强大。

自定义hooks是Vue 3 Composition API的强大特性之一，它们提供了一种新的方式来组织和重用代码，使得Vue组件更加简洁和易于管理。