📦 Install

by using npm:

npm install hooks-vue3 --save

by using yarn:

yarn add hooks-vue3

by using pnpm:

pnpm install hooks-vue3 --save

📚 Online Docs

🔨 Usage

• React Style

  • useState — useState 管理状态值.

• Async

  • useAsyncState — useAsyncState 管理异步状态值.

• Watch

  • useDebounceWatch - useDebounceWatch 跟watch类似，可以控制函数在多次触发的防抖。
  • useThrottleWatch - useThrottleWatch 跟watch类似，可以控制函数在多次触发的节流。
  • useOnceWatch - useOnceWatch 跟watch类似，只触发一次监听，然后自动停止监听

• Side

  • useTimeout — useTimeout 在指定的时间后执行一个函数
  • useRafTimeout — useRafTimeout 在指定的时间后执行一个函数，基于 requestAnimationFrame 实现
  • useInterval — useInterval 定时器执行一个函数
  • useRafInterval — useRafInterval 定时执行一个函数，基于 requestAnimationFrame 实现

• State

  • useBoolean — useBoolean 管理一个布尔类型的状态值.
  • useToggle — useToggle 可用于管理布尔值状态，还可以用于管理任何类型的状态的真假值
  • useDebounce — useDebounce 用于处理防抖值
  • useThrottle — useThrottle 用于处理节流值
  • useLocalStorage — useLocalStorage 将状态持久化到 localStorage 本地存储中
  • useSessionStorage — useSessionStorage 将状态持久化到 sessionStorage 本地存储中
  • useCountDown - useCountDown 可用于实现倒计时
  • useRafCountDown - useRafCountDown 可用于实现倒计时，基于 requestAnimationFrame 实现

• Elements

  • useClickOutside — useClickOutside 监听点击目标元素外部时执行某个回调函数，点击事件也可以自定义，可以是其它的鼠标事件
  • useElementSize - useElementSize 可以用于获取DOM元素的尺寸信息
  • useTitle -
  • useLongPress — useLongPress 用于在长按某个元素时触发回调函数
  • useDocumentVisibility — useDocumentVisibility 检测当前页面是否处于活动状态（即当前窗口的可见性）
  • useEventListener — useEventListener 用于封装原生的 addEventListener 方法，使得在函数式组件中添加事件监听器更加方便
  • useHover — useHover 鼠标是否正在悬停目标元素上