vue3自定义hooks大集合，你要的都在这！

前言

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

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

qianyan.png

介绍

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

• 组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件

• 虽然这套 API 的风格是基于函数的组合，但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可

• 组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins，而组合式 API 解决了 mixins 的所有缺陷

使用

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

• 一种是 基于业务的 自定义hooks 只是为了单纯提取 可复用的逻辑 ，缺点是只能用在自己项目中

• 一种是 可复用行强的 可在全局使用的 比如对于弹框、表格、表单等等的自定义hooks

基于业务封装的 hooks

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

输入框

1.png

下拉框

2.png

开关:

3.png

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

4.png

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

5.png

复用性强的自定义hooks：

1) 更改网站title

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

7.png

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

8.png

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

const setTitle = useTitle('测试')

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

6.png

这个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 库）

往期推荐

js如何控制一次只加载一张图片，加载完成后再加载下一张

面试官：假如有几十个请求，如何去控制并发？

前端权限开发——设计到实践（保姆级）

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧