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

前言

不知道喜欢 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.rhkb.cn/news/230502.html

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

相关文章

程序媛的mac修炼手册-- 终端shell的驾驭 zsh vs bash

进入终端(Terminal)为新下载的应用配置环境,是Mac生产力up up的关键一步,更是编程小白装大神的第一步。Fake it till you make it , 硅谷大神标准路径~ shell的基本原理 为应用配置环境,相当于在应用和操作系统间架桥。由此&…

VSCode使用Remote SSH远程连接Windows 7

结论 VSCode Server不能启动,无法建立连接。 原因 .vscode-server 目录中的 node.exe 无法运行。 原因是Node.js仅在Windows 8.1、Windows Server 2012 R2或更高版本上受支持。 由于vscode基于node.js v14,不支持Windows 7操作系统。 另&#xff…

低成本高效率易部署,Ruff工业数采网关+IoT云平台赋能工厂数字化管理

随着工业4.0的快速发展,工业物联网是工业企业实现数字化转型的重要助力,物联网技术的应用也越来越广泛。 作为连接设备与网络的关键节点,数据采集网关是连接工业设备与物联网平台的硬件设备,它负责将工业设备的数据采集、传输到物…

Fast R-CNN

Fast R-CNN算法流程 对比与R-CNN其在第二步时并没有将所有的候选区域进行逐个的CNN特征提取,而是直接将整个图片进行一次CNN特征提取,让后再将候选区映射到feature map上。可想而知速度得到了提升。这里的ROI pooling层缩放到7x7就是将候选区域对应的特征…

企业使用人工智能情况调查

企业使用人工智能情况调查 人工智能在商业中的应用并不是什么新鲜事。多年来,公司一直在使用人工智能技术来削减成本并提高效率。 但最近生成式人工智能市场的激增帮助人工智能成为主流商业技术。具体来说,ChatGPT 和 Midjourney 等大型语言模型 (LLM)…

【Dart】=> [02] Dart初体验-基础语法(ing~

目录 Dart初体验基础语法变量常量数据类型数值类型 Dart初体验 效果:运行Dart程序,并输出字符串 ‘hello itcast’ 创建Dart文件 hello.dart,(Dart文件的后缀是 .dart )编写Dart代码 // 程序肯定都是有入口的 : main…

提取 PE 文件的各种信息

前段时间项目需要实现对 Windows PE 文件版本信息的提取,如文件说明、文件版本、产品名称、版权、原始文件名等信息。获取这些信息在 Windows 下当然有一系列的 API 函数供调用,简单方便。 我们先看一下PE文件结构,PE文件由DOS首部&#xff0…

LeetCode 25. K 个一组翻转链表

K 个一组翻转链表 给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表。 k 是一个正整数,它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改…

不同语言告别2023,迎接2024

一、序言 1.一名合格的程序员,始于Hello World,终于Hello World,用不同语言表达2023最后一天。 2.在这一年里,博主新接触了VUE、Python、人工智能、JAVA的框架SprinBoot、微服务等,然后一路来感谢大家的支持&#xf…

nifi详细介绍--一款开箱即用、功能强大可靠,可用于处理和分发数据的大数据组件

目录 目录 一、引言 二、NiFi 的历史背景介绍 三、NiFi 是什么? 核心特性 应用领域 四、NIFI 入门 五 、NiFi 工作流程 六、实际应用场景 七、优势总结 一、引言 NiFi(Apache NiFi),全名为“Niagara Files”&#xff0…

Unity DOTS中的baking(二)Baker的触发

Unity DOTS中的baking(二)Baker的触发 我们知道,当传入Baker的authoring component的值发生变化时,就会触发baking。不过在有些情况下,component所引用的对象没有变化,而是对象自身内部的一些属性发生了变化…

编写.NET的Dockerfile文件构建镜像

创建一个WebApi项目,并且创建一个Dockerfile空文件,添加以下代码,7.0代表的你项目使用的SDK的版本,构建的时候也需要选择好指定的镜像tag FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS base WORKDIR /app EXPOSE 80 EXPOSE 443F…

深度学习基础知识神经网络

神经网络 1. 感知机 感知机(Perceptron)是 Frank Rosenblatt 在1957年提出的概念,其结构与MP模型类似,一般被视为最简单的人工神经网络,也作为二元线性分类器被广泛使用。通常情况下指单层的人工神经网络&#xff0c…

超实用的小红书达人投放策略分析,纯干货

为什么我投放了小红书达人却没有什么效果? 品牌到底应该怎么投放小红书达人? 品牌小红书达人投放怎么去把控和规划? 小红书达人作为品牌方和用户之间的桥梁,直接影响消费决策。达人粉丝数量大,粘性高,很…

一加 Buds 3正式发布:普及旗舰音质 一加用户首选

1月4日,一加新品发布会正式推出旗下新款耳机一加 Buds 3。延续一加经典美学,秉承音质完美主义追求,一加 Buds 3全面普及一加旗舰耳机体验,其搭载旗舰同款“超清晰同轴双单元”,配备49dB 4000Hz超宽频主动降噪&#xff…

Oracle笔记-查看表已使用空间最大空间

目前以Oracle18c为例,主要是查这个表USER_SEGMENTS。 在 Oracle 18c 数据库中,USER_SEGMENTS 是一个系统表,用于存储当前用户(当前会话)拥有的所有段的信息。段是 Oracle 中分配存储空间的逻辑单位,用于存…

linux centos 添加临时ip

### 1.添加ip ip addr add IP/mask dev 网络设备 例:ip addr add 172.104.210.247/24 dev ens5f1 ### 2.启动网卡 ip link set up 网络设备 例:ip link set up ens3f0 ### 3.设置默认路由 ip route add default via GATEWAY 例:ip route add …

vu3-14

第一个需求是在用户登录成功之后,在主页显示用户的真实姓名和性别,这些信息要调用后端API获取数据库里面的信息,第二个需求是点击菜单1,在表单中修改用户信息之后,更新到后端数据库,然后在主页同步更新用户…

增删改查语句实现了解不同的函数与特殊字符unionunion all区别

一、crud(增删改查) 1.1、查询 概念: 查询数据是指从数据库中根据需求,使用不同的查询方式来获取不同的数据,是使用频率最高、最重要的操作 注:在MySQL中,当执行一条SQL语句后,系…

Docker中的核心概念

1.镜像 Image 一个镜像就代表一个软件。mysql镜像、redis镜像、mq镜像 2.容器 Container 一个镜像运行一次就会生成一个容器,容器就是一个运行的软件服务。 3.远程仓库 Repository 远程仓库用来存储所有软件的镜像,Docker Hub 4.本地仓库 用来存储…