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 XXX (后面遇到需要封装的hooks再更新,请持续关注。)

 7、注意事项

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/20120.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MyBatis延迟加载缓存分页逆向工程

文章目录 延迟加载概述步骤 缓存一级缓存介绍原理 二级缓存介绍 设置缓存对象策略原理开启步骤属性解释是否使用一级缓存 分页插件使用步骤 逆向工程介绍搭建使用增删修改查 延迟加载 概述 延迟加载本身是依赖于多表查询的 延迟加载中返回值要选择resultMap返回的结果一定是D…

数学建模 —— 插值与拟合(1)

一、matlab画图 1.1 plot&#xff08;二维图形&#xff09; plot(x) —— 缺省自变量绘图格式 plot(x,y) —— 基本格式&#xff0c;以y(x)的函数关系作出直角坐标图&#xff0c;如果y为nm的矩阵&#xff0c;则以x为自变量&#xff0c;作出m条曲线 plot(x1,y1,x2,y2,…,xn,…

python循环引用和解决方法

目录 1. 延迟导入 2. 使用 importlib 3. 重构代码 4. 使用类型提示的前向引用 在Python中&#xff0c;两个文件循环引用的问题通常发生在模块相互依赖导致的导入循环。这种情况下&#xff0c;解决循环引用的方法有几种&#xff0c;以下是一些常见的解决方案&#xff1a; 1…

神经网络算法详解与前沿探索

神经网络算法详解与前沿探索 随着人工智能技术的迅猛发展&#xff0c;神经网络成为机器学习领域的重要组成部分&#xff0c;广泛应用于图像识别、自然语言处理和推荐系统等。本文将详细探讨神经网络的基本原理、结构、训练过程及其应用实例&#xff0c;并扩展至更多相关领域和…

基于标准库的STM32的外部中断EXTI

毕设已经告一段落了&#xff0c;接下来准备开始整理一下毕设中用到的知识与技术细节&#xff0c;今天整理的是STM32从编码器获取数据的方式-----外部中断&#xff08;EXTI&#xff09;&#xff1a; 外部中断分为四个硬件相关外设&#xff0c;GPIO/AFIO/EXTI/NVIC&#xff08;E…

jQuery前端开发入门图片:探索图片操作的奥秘与技巧

jQuery前端开发入门图片&#xff1a;探索图片操作的奥秘与技巧 在前端开发中&#xff0c;图片的处理与展示往往占据着举足轻重的地位。jQuery&#xff0c;作为一款流行的JavaScript库&#xff0c;为我们提供了丰富的图片操作方法和技巧。本文将通过四个方面、五个方面、六个方…

戴尔向“数”而行,以“质”致远,做新质生产力的躬耕者

【全球存储观察 &#xff5c; 热点关注】 自1984年戴尔成立&#xff0c;一路走来&#xff0c;戴尔科技集团40年长期持续的技术创新&#xff0c;一直引领全球科技行业的技术趋势。 到如今&#xff0c;AIGC风行一时&#xff0c;在重塑千行百业的同时&#xff0c;也加速了科技行业…

选择算法之冒泡排序【图文详解】

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;LiUEEEEE                        …

题目:求0—7所能组成的奇数个数。

题目&#xff1a;求0—7所能组成的奇数个数。 There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being cheated should…

[大师C语言(第十七篇)]C语言链表背后技术详解

引言 链表是一种常见的数据结构&#xff0c;用于存储线性数据集合。在C语言中&#xff0c;链表由一系列节点组成&#xff0c;每个节点包含数据和指向下一个节点的指针。本文将深入探讨C语言链表背后的技术原理&#xff0c;并通过丰富的代码示例来讲解其应用。 第一部分&#…

北斗应急救援终端如何做好汛期重点行业安全防控?

【安全提示】 汛期各地高温多雨、极端天气增多 防汛和安全生产形势严峻复杂如何做好汛期重点行业企业安全生产风险防控&#xff1f; 顶坚北斗短报文终端V1单北斗定位终端 北斗应急救援终端在汛期重点行业安全防控中扮演着关键角色&#xff0c;其高可靠性、稳定性和丰富的功能扩…

达摩院AI早癌筛查技术闪耀联合国,癌症早治时代来临?

全文预计1200字左右&#xff0c;预计阅读需要6分钟。 5月30日&#xff0c;在日内瓦举行的联合国AI大会上&#xff0c;各国的代表性企业拿出最优秀的AI成果进行分享。其中代表中国的是阿里巴巴集团的下属机构-达摩院&#xff0c;其在现场播放的一段影像&#xff0c;让在场的所有…

uniApp子组件监听数据的变化的方法之一

props:{//用来接收外界传递过来的数据swiperList:{type:Array,default:[]}}, swiperList&#xff1a;是父组件传递过来的值 通过 watch 监听&#xff08;在父组件中也同样可以使用&#xff0c;跟VUE的监听数据变化同理&#xff09; watch:{//监听组件中的数据变化swiperList(ol…

Diffusion Facial Forgery (DiFF) ——一个新的大规模人脸伪造检测数据集

1. 概述 近年来&#xff0c;条件扩散模型&#xff08;CDM&#xff09;在图像生成领域备受关注。它能够通过简单的输入&#xff08;如自然语言提示&#xff09;生成令人惊讶的忠实图像。然而&#xff0c;这一进步也引发了新的安全和隐私问题。例如&#xff0c;怀有恶意的个人现…

【笔记】使用XtraBackup进行热备份

备份环境&#xff1a; 具备dockermysql8(5.7及以下版本更换xtrabackup版本即可&#xff0c;具体版本号查看官网)将云盘挂载到服务器上&#xff0c;可以使用s3协议 #!/bin/bash# 目录配置部分 HOST_BACKUP_DIR"/root/docker/mysql8/backup/full" # 宿主机备份目录 H…

结构体(C保姆级讲解)

前言&#xff1a; 为什么会有结构体&#xff0c;结构体可以用来面熟一个复杂对象&#xff0c;我们知道C语言中有哪些数据类型&#xff0c;有整型&#xff0c;有浮点型&#xff0c;有字符型&#xff0c;但是在生活中&#xff0c;我们需要描述一些比较复杂的东西&#xff0c;比如…

如何理解央行买卖国债?

浙商证券覃汉认为&#xff0c;央行对长债的风险持续关注&#xff0c;30年国债收益率较难突破2.5%&#xff0c;区间底部已经多次印证&#xff0c;在学习效应影响下&#xff0c;长端利率预计继续以震荡调整为主。 1、央行买卖国债的政策要求、历史经验、优势 2023年中央金融工作…

语音助手拦截,拦截小秘书

呼叫中心业务场景下会遇到很多的语音助手和语音小秘书&#xff0c;还有一些漏话提醒、语音信箱等&#xff1b;大部分原因是由于主叫号码标记问题导致的局端和终端拦截策略&#xff0c;电话没有真实有效的触达并产生了通信费&#xff0c;这让很多业务场景下通信成本上涨据不完全…

常用中间件各版本下载

常用中间件下载地址 前言分布式中间件负载均衡中间件缓存中间件数据库中间件其他中间件1、Maven下载地址2、Git下载地址2、JDK下载地址3、MySQL下载地址4、Redis下载地址5、Nacos下载地址6、Tomcat下载地址7、Nginx下载地址8、RocketMQ下载地址8、RabbitMQ下载地址8、Erlang下载…

【Redis】常见的 Redis 集群方案

Redis 集群用于在多个 Redis 节点之间分布数据&#xff0c;以提高可用性和扩展性。常见的 Redis 集群方案有以下几种&#xff1a; 1. 哨兵 (Sentinel) Sentinel 是一种高可用解决方案&#xff0c;用于监控 Redis 主从复制的实例并在主节点发生故障时进行自动故障转移。 优点…