Vue3初体验——写一个 Hook 函数库

为什么要写这么一个库？

主要是为了将在 Composition API 文档中学习到的知识应用一遍，毕竟“好记性不如烂笔头”，实践才是检验真理的唯一标准。

使用到的技术

Vue3 Composition API TypeScript commitlint、commitizen、husky、lint-staged jest vitepress

在线文档(传送门)

项目文档使用 vitepress —— 尤大出品的基于 vite 的静态站点生成工具生成

目前实现的功能

State

useTitle —— 用于设置页面的标签页标题 useToggle —— 用于在两个状态之间切换 useBoolean —— 用于管理 Boolean 状态的 Hook useHash —— 追踪 location.hash 的变化 useHistory —— 追踪 history 的变化

DOM

useEvent / useEventRef —— 用于监听事件的 Hook

Lifecycles

useLifecycles —— 同时使用 onMounted 和 onUnmounted 的 Hook

SideEffects

useDebounce —— 带防抖功能的状态 useDebounceFn —— 生成带防抖功能的函数 useInterval —— 对 setInterval 的简单封装 useTimeout —— 用于在一段时间后更新值 useTimeoutFn —— 用于在一段时间后执行回调

Storage

useLocalStorage —— 具备响应式功能的 localStorage 状态 useSessionStorage —— 具备响应式功能的 sessionStorage 状态 useStorage —— 提供具备响应式的 localStorage 或 sessionStorage 状态

Sensors

useResize —— 追踪 window 的大小 useScroll / useScrollRef —— 追踪特定 DOM 节点的滚动位置 useWindowScroll —— 追踪 window 滚动的位置

写在最后

项目地址,欢迎各位大佬一起搞事情，同时，各位大佬如果觉得写得还阔以的话，这里不要脸的要个star，哈哈哈，祝各位大佬国庆中秋长假快乐^^。