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，哈哈哈，祝各位大佬国庆中秋长假快乐^^。