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 发给任何人他们都能用到自己的项目中这个就是复用性强的不像我们上一类只能针对于我们自己项目用

给大家分享一下我平时收藏的 vue3 hooks的网站以及文章：

开源库与开源项目中的hooks

🚀vue3官方推荐社区项目：VueUse

这个是我最推荐大家的hooks 平时没事的时候在里面逛一下看看源码绝对能学到很多，我平时用的比较多的是其中的 useResizeObserver、useTitle、useClipboard、useDraggable 等

🚀ahooks-vue

ahooks 的 vue 实现。许多 hooks 是从ahooks移植过来的，但是不完全一致。包含了 useRequest、useAxios、useFullscreen、useTable等

🚀个人封装的hooks 库

这个是我偶然发现的一个hooks 库感觉也是模仿其他库的，仅供参考

🚀vue-hooks

主要包含了 useDate、useStore、useActions等

🚀vue-use-web

跟 vueuse 有点像不知道是不是vueuse 前身，而且都是国外大佬维护的

🚀vue-hooks-plus

其中包含47个高质量 & 可靠 hook函数其中useRequeset 、useWebSocket、useFetchs等都很优秀

🚀针对 Vue3 的实用Hooks集合

useRequest、 useDate、useVirtualList 我在项目中都用到了

🚀20kstars 的后台管理项目：vue-vben-admin

这个是点赞比较多的 vue3 后台管理项目其中我上面的分页hooks 就是抄他的里面还有很多表格表单hooks 大家也可以参考其中包含了 useContext、useScroll、useEventListener、useTable、useTitle等

🚀vue3-antd-admin

喜欢用 antd 的同学可以看看其中的useI18n useModal、useEventbus 方案都很优秀

表格相关的

🚀一文学会vue3如何自定义hook钩子函数和封装组件

🚀【Vue3】如何封装一个超级好用的 Hook ！

🚀useTable表格hooks封装和使用(Vue3)

🚀vue3流水线开发分页列表？😁 useTable了解一下

🚀Vue3自定义useTable

🚀在Vue3这样子写页面更快更高效

🚀基于vue3+Arco Design的table组件的hook二次封装

每个人封装的表格 hook 其实都有区别所以大家可以综合一下总结出比较适合自己项目的，因为每个人项目中的 ui 分页等等都不太一样所以个人建议总结出一个集成到自己项目中是最好的

关于请求的 hook

🚀Vue3 教你实现公司级网络请求的 Hook

🚀Vue3使用hook封装常见的几种异步请求函数场景，让开发更加丝滑

其他 hooks

🚀Form表单组件封装和使用(Vue3)

他把antdvue 的form 二次封装了并且搭配了自己的封装的hooks

🚀【vue3】写hook三天，治好了我的组件封装强迫症。

封装了下拉框选项从后端获取值得hooks 以及关于 loading 状态的 hook

🚀Vue3自定义一个Hooks，实现一键换肤

一键换肤的 hooks

🚀Vue3使用hook封装媒体查询和事件监听，使Vue的开发更加丝滑🚀🚀🚀

🚀聊聊Vue3+hook怎么写弹窗组件更快更高效

🚀【Vue3 Hook】实现 useTimeout 代替 setTimeout

🚀公共Hooks封装之文件下载useDownloadBlob

🚀在vue中封装useIntro来更好的使用Intro.js

总结

以上是我工作这么长时间收藏到的，分享出来希望能够给到大家一点帮助，如果大家也有比较好自定义hooks的方案和 hooks 库可以在下面评论哦我觉得比较好的话会再给他加上去的，最终也希望自己能做一个跟 vueuse媲美的 hooks 名字我都想好了，就叫 jym-hooks （掘友们一起创建的 hooks 库）