Vue3 自定义Hooks大全:一站式解决你的疑惑!

news2025/5/28 2:37:14

前言

不知道喜欢 vue3 的小伙伴和我是不是一样,刚上手vue3 的时候 对自定义hooks 一脸懵逼,在一些视频网站学习的时候老师讲解到自定义hooks 最喜欢用 加减乘除来描述 自定义hooks 是咋用的,可能是我理解能力比较差吧,我看了这个 加减乘除的自定义hooks 之后感觉跟没看一样,还是一脸懵逼,所以个人觉得这种知识还是结合项目或者业务来说才是比较能让人理解的。

但是平时开发的过程中却好像也不怎么需要自定义hooks ,那我们到底需不需要自定义hooks,又该如何学习自定义hooks 呢,首先先在这跟你说结论:自定义hooks 不是必须的 他只是为我们提供一种 逻辑复用 的方式,但是他有利于你复用逻辑 代码更简洁,那如何学?学习别人的思想啊!然后自己融汇贯通即可。

介绍

其实我们平常说的 自定义hooks 在vue3 官方说法叫组合式 API (Composition API)

  • 组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件
  • 虽然这套 API 的风格是基于函数的组合,但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的,而函数式编程通常强调数据不可
  • 组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins,而组合式 API 解决了 mixins 的所有缺陷

使用

平时我们 写自定义hooks 可能有两种

  • 一种是 基于业务的 自定义hooks 只是为了单纯提取 可复用的逻辑 ,缺点是只能用在自己项目中
  • 一种是 可复用行强的 可在全局使用的 比如对于弹框、表格、表单等等的自定义hooks

基于业务封装的 hooks

最近我在开发低代码的项目 我在项目中得封装一套组件 看下面的伪代码:

输入框

在这里插入图片描述

下拉框

在这里插入图片描述

开关:

在这里插入图片描述

大家可以看到 每个组件都有个共性,有个配置项 status 如果值为 disabled 的时候 会被赋值到组件上 要是有很多组件 我们都得复制一下这个代码 那就比较恶心了,这个时候我们就可以用自定义hooks 去封装这个属性:

在这里插入图片描述

我们组件就可以 通过 hooks 去引入这个属性了 这样 每个组件也只要引入这个hooks 就行

在这里插入图片描述

复用性强的自定义hooks:

1) 更改网站title

大家有没有遇到过这种业务 就是每个页面进入之后都有他自己对应的 title 你都得去改 如果没有的话 那他就是 之前的title 不用改 所以你就可能在每个页面写出 类似以下的代码:

在这里插入图片描述

但是你要是用了 封装之后的 hooks 之后

在这里插入图片描述

你只需要把这个hooks 引入 只写一句代码 就行

const setTitle = useTitle('测试')
2) 大家写后台管理的 时候是不是大多场景都是 对于表格的增删改查 ,对于分页的操作每个页面其实都是一样的,这个时候我们就可以把他封装起来

在这里插入图片描述

这个hooks 发给任何人 他们都能用到自己的项目中 这个就是复用性强的 不像我们上一类 只能针对于我们自己项目用

完整附件:点此下载

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

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

相关文章

C 练习实例19

题目:一个数如果恰好等于它的因子之和,这个数就称为"完数"。例如61+2+3.编程找出1000以内的所有完数。 程序分析:请参照:C 练习实例14。 步骤分析: 写一个函数判断是否是完数 找出…

2.4G无线收发芯片XL2407P产品特征介绍,专为多组PWM的应用设计。

XL2407P 芯片是工作在 2.400~2.483GHz 世界通用 ISM 频段,集成微控制器的的 SOC 无线收发芯片。该芯片集成射频收发机、频率收生器、晶体振荡器、调制解调器等功能模块,并且支持一对多组网和带 ACK的通信模式。发射输出功率、工作频道以及通信数据率均可…

SpingBoot的项目实战--模拟电商【5.沙箱支付】

🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于SpringBoot电商项目的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 一. 沙箱支付是什么 二.Sp…

vscode安装Prettier插件,对vue3项目进行格式化

之前vscode因为安装了Vue Language Features (Volar)插件,导致Prettier格式化失效,今天有空,又重新设置了一下 1. 插件要先安装上 2. 打开settings.json {"editor.defaultFormatter": "esbenp.prettier-vscode","…

Springcloud 微服务实战笔记 Feign

优点 基于Netflix Feign实现&#xff0c;整合了Spring cloud Ribbon 和 Spring cloud Hystrix 提供了声明式的WEB服务客户端定义方式 扩展了Spring MVC的注解支持 使用 1、pom导入包&#xff1a; <dependency><groupId>org.springframework.cloud</groupId…

系统崩溃无U盘重装Win10系统的方法

用户反映自己电脑上的操作系统出现了崩溃问题&#xff0c;无法通过简单的操作解决问题&#xff0c;想重新安装正常的操作系统&#xff0c;但是没有U盘不知道要怎么操作才能安装好系统&#xff1f;接下来小编带来系统崩溃无U盘重装Win10系统的方法步骤介绍&#xff0c;用户们可以…

Spring Boot 完善订单【五】集成接入支付宝沙箱支付

1.1.什么是沙箱支付 支付宝沙箱支付&#xff08;Alipay Sandbox Payment&#xff09;是支付宝提供的一个模拟支付环境&#xff0c;用于开发和测试支付宝支付功能的开发者工具。在真实的支付宝环境中进行支付开发和测试可能涉及真实资金和真实用户账户&#xff0c;而沙箱环境则提…

7. Mybatis 代码反向生成器(MBG)

一、插件的使用 描述: mybatis generator 的作用是根据数据库自动生成 实体类、Dao接口、Mapper 映射文件。 数据库&#xff1a; create table product( id int primary key AUTO_INCREMENT, pname varchar(20), price double, category_id varchar(32) ); INSERT INTO produ…

B样条曲线

零次 B 样条 F i &#xff0c; 0 ( t ) { 1 t i ≤ t < t i 1 0 o t h e r s \bm{F}_{i&#xff0c;0}(t) \begin{cases} 1 & t_i \leq t <t_{i1} \\ 0 & others \end{cases} Fi&#xff0c;0​(t){10​ti​≤t<ti1​others​ 2. 一次 B 样条&#xff0c;…

node加速镜像源 管理工具nrm安装使用

我们在开发node.js的时候,经常会遇到某些包无法下载, 或者下载太慢, 还有需要加载我们自己是有源中的包的问题, 今天推荐给大家的这款 nrm 镜像源管理工具就是解决这类问题的. 安装 方法也很简单, 执行 npm install nrm -g 就可以安装 # 安装nrm npm install nrm -g# 添加…

LN和BN

假设batch为2&#xff0c;&#xff08;2&#xff0c;3&#xff0c;256&#xff0c;256&#xff09;这样的样本 LN比较直观就是在每个独立的样本上计算均值和方差&#xff0c;然后归一化。&#xff08;2&#xff0c;3&#xff0c;256&#xff0c;256&#xff09; 归一化是将数…

14:00面试,14:06就出来了,问的问题真的变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到5月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…

mac远程ssh免密登录

服务器部署经常会登录到远程服务&#xff0c;为方便操作&#xff0c;提高效率对运维人员来说设置免密登录还是很有必要的。其实也是很简单&#xff0c;安以下操作步骤即可。 1、进入到&#xff5e;/.ssh目录下&#xff0c;确认已经生成有公钥与私钥。如果没有请执行发下命令 …

Jetson Xavier NX安装pytorch环境《最全、简洁》

有段时间没有写嵌入式领域相关的文章了&#xff0c;近期也在学习和做嵌入式领域的相关作业&#xff0c;学习了一段时间的Jetson Xavier NX开发套件&#xff0c;总结了Jetson Xavier NX如何安装pytorch环境。文章分类在嵌入式学习&#xff1a; 嵌入式学习 ---《Jetson Xavier NX…

鸿蒙南向开发—OpenHarmony技术编译构建框架

概述 OpenHarmony编译子系统是以GN和Ninja构建为基座&#xff0c;对构建和配置粒度进行部件化抽象、对内建模块进行功能增强、对业务模块进行功能扩展的系统&#xff0c;该系统提供以下基本功能&#xff1a; 以部件为最小粒度拼装产品和独立编译。支持轻量、小型、标准三种系…

功能介绍 | 探秘Goby功能世界:点击URL,即刻畅享快速调起之旅!

​​0x01 前言 ​我们从只会点鼠标的猴子到CtrlC,CtrlV来回切换的工具人&#xff0c;但有时候遇到大量需要复制的url界面&#xff0c;真的希望能有一个可以一键整理、一键扫描URL的功能来拯救&#xff01; 好消息是&#xff0c;Goby从客户端版本2.8.6起&#xff0c;官方引入了…

5G阅信助力互联网行业:XX出行-出票通知,案例分析

XX出行日常有大量业务通知短信下发&#xff0c;用户触达频次和用户打开率都比较高&#xff0c;但原短信无法带来附加营销增值&#xff0c;通过阅信增值服务消息将两者结合起来&#xff0c;可实现业务的多渠道引流&#xff0c;开拓了新的渠道和方式。 项目概述&#xff1a; 1. 项…

均匀与准均匀 B样条算法

B 样条曲线的定义 p ( t ) ∑ i 0 n P i F i , k ( t ) p(t) \sum_{i0}{n} P_i F_{i, k}(t) p(t)i0∑​nPi​Fi,k​(t) 方程中 n 1 n1 n1 个控制点&#xff0c; P i P_i Pi​, i 0 , 1 , ⋯ n i0, 1, \cdots n i0,1,⋯n 要用到 n 1 n1 n1 个 k k k 次 B 样条基函数 …

Unity中URP下统一不同平台下的z值

文章目录 前言一、ComputeFogFactor 来计算雾效混合因子二、UNITY_Z_0_FAR_FROM_CLIPSPACE 来统一计算不同平台下的Z值1、DirectX平台2、GL平台下&#xff08;在Unity.2022.LTS下&#xff0c;该功能没有完善)3、Opengl下 前言 在之前的文章中&#xff0c;我们实现了URP下的雾效…

企业培训系统开发:构建灵活高效的学习平台

企业培训系统的开发在当今数字化时代是至关重要的。本文将介绍一些关键技术和代码示例&#xff0c;以帮助您构建一个灵活、高效的企业培训系统。 1. 技术选型 在开始企业培训系统的开发之前&#xff0c;首先需要选择合适的技术栈。以下是一个基本的技术选型示例&#xff1a;…