vue3.0 hook 工具包

对 umi hooks 等工具 hook 的 vue3.0 实现

hooks

State

useToggle 开关值切换
useBool 布尔值切换
useMap Map操作
useSet Set操作
useTimeout 延时
useSetRef dom对象获取
usePrevious 值缓存
useCounter 计数器

SideEffect

useDebounce 值防抖
useDebounceFn 函数防抖
useThrottle 值节流
useThrottleFn 函数节流

Cache

useStrongeState 本地缓存
useLocalStorageState
useSessionStorageState

Dom

useMousewheel 鼠标滚轮滑动监听
useClickAway 外部点击
useDrop 拖拽
useHover 划入
useMouse 鼠标移动
useSize dom尺寸变化
useMutationObserver 元素属性监听

Index

Type aliases

Variables

defaultMutationObserverInit

Type aliases

BaseTarget

BaseTarget<T>: (() => T | null) | T | null | Ref<T>

Type parameters

T = HTMLElement

Fn

Fn: (...args: any[]) => any

Type declaration

- (...args: any[]): any
- Parameters
  - Rest ...args: any[]
  Returns any

MouseWheelDirectionX

MouseWheelDirectionX: "left" | "right" | "unchange"

X轴方向

MouseWheelDirectionY

MouseWheelDirectionY: "up" | "down" | "unchange"

Y轴方向

MouseWheelDirectionZ

MouseWheelDirectionZ: "out" | "in" | "unchange"

Z轴方向

MouseWheelType

MouseWheelType: "px" | "line" | "page" | "undefined"

值单位类型

TargetElement

TargetElement: HTMLElement | Element | Document | Window

Variables

Const defaultMutationObserverInit

defaultMutationObserverInit: { attributes: boolean } = ...

useMutationObserver 默认属性配置

Type declaration

attributes: boolean

Functions

Const curry

curry<T>(fn: T, preArgs?: any[]): (...args: any) => any

- Defined in vx-hooks/src/_utils/curry.ts:18
柯里化

summary

使用 function.length 获取函数期望参数格式，作为执行标记

example

const add = (a, b) => a + b const addOne = curry(add)(1) addOne(10) ==> 11 addOne(11) ==> 12

Type parameters
- T: (...args: any) => any
Parameters
- fn: T
  
  被柯里化函数
- preArgs: any[] = ...
  
  继承参数
Returns (...args: any) => any
- - (...args: any): any
  - Parameters
    - Rest ...args: any
      
      当前参数
    Returns any

Const dely

dely(time: number): Promise<unknown>

- Defined in vx-hooks/src/_utils/dely.ts:2
Parameters
- time: number
Returns Promise<unknown>

getDragDataSign

getDragDataSign(): string

- Defined in vx-hooks/src/useDrop/index.ts:18
Returns string

getTargetElement

getTargetElement(target: BaseTarget<TargetElement>, defaultElement?: TargetElement): TargetElement | undefined | null

- Defined in vx-hooks/src/_utils/dom.ts:12
Parameters
- target: BaseTarget<TargetElement>
- Optional defaultElement: TargetElement
Returns TargetElement | undefined | null

mouseWheelTypeMap

mouseWheelTypeMap(n: number): MouseWheelType

- Defined in vx-hooks/src/useMousewheel/index.ts:31
滚轮事件值单位类型断言

Parameters
- n: number
  
  类型值
Returns MouseWheelType

类型名称

Const pipe

pipe(...fns: ((...args: any[]) => any)[]): (arg?: any) => any

- Defined in vx-hooks/src/_utils/pipe.ts:16
管道

summary

管道执行顺序为参数传入顺序

example

const step_1 = () => console.log('step 1') const step_2 = () => console.log('step 2') const run = pipe(step_1, step_2) run() => step 1 => step 2

Parameters
- Rest ...fns: ((...args: any[]) => any)[]
  
  组合函数
Returns (arg?: any) => any

组合后函数
- - (arg?: any): any
  - Parameters
    - Optional arg: any
    Returns any

useBool

useBool(initStatus?: boolean): UseBoolAPI

布尔值切换器

example

<template>
   <h1 v-if='state'>
     visibal
   </h1>
   <button @click='toggle'>
      toggle
   </button>
 </template>
 import { useBool } from 'vx-hooks'
 export default {
   setup(){
     const { state, toggle } = useBool(true)
     return { state, toggle }
   }
 }

Parameters

initStatus: boolean = false

初始值

Returns UseBoolAPI

useClickAway

useClickAway(onClickAway: (evn: MouseEvent) => void, dom?: Ref<BaseTarget | BaseTarget[]>, type?: string): UseClickAwayAPI

元素外点击

example


 <template>
   <div id='left' ref='target'></div>
   <div id='right'></div>
 </template>
 
 setup(){
   const count = ref(0)
   const { target, addEvent, cancelEvent, reset } = useClickAway(() => { count.value += 1 })
   return { target }
 }

left.trigger('click')
count => 0
right.trigger('click')
count => 1

// 取消 document 监听
cancelEvent()
right.trigger('click')
right.trigger('click')
count => 1

// 回复 document 监听
addEvent()
right.trigger('click')
count => 2

// 重置回调
const newCb = () => console.log('hidden !!!')
reset(newCb, 'click')

Parameters

onClickAway: (evn: MouseEvent) => void

事件回调
- - (evn: MouseEvent): void
  - Parameters
    - evn: MouseEvent
    Returns void
Optional dom: Ref<BaseTarget | BaseTarget[]>

观察元素
type: string = 'click'

事件类型

Returns UseClickAwayAPI

useCounter

useCounter(initVal: number, options?: UseCounterOptions): { current: Ref<number>; dec: (delta?: number) => number; inc: (delta?: number) => number; reset: () => number; set: (value: number) => number }

- Defined in vx-hooks/src/useCounter/index.ts:59
计数器
example
```
const { current, set, inc, dec, reset } = useCounter(0, { max: 10, min: 1 })
console.log(current) // 1
inc()
console.log(current) // 2

inc(12)
console.log(current) // 10

dec()
console.log(current) // 9

dec(12)
console.log(current) // 1

set(4)
console.log(current) // 4

reset()
console.log(current) // 1
```
Parameters
- initVal: number
  
  初始值
- options: UseCounterOptions = ...
  
  配置属性
Returns { current: Ref<number>; dec: (delta?: number) => number; inc: (delta?: number) => number; reset: () => number; set: (value: number) => number }
- current: Ref<number>
- dec: (delta?: number) => number
  - - (delta?: number): number
    - Parameters
      - delta: number = 1
      Returns number
- inc: (delta?: number) => number
  - - (delta?: number): number
    - Parameters
      - delta: number = 1
      Returns number
- reset: () => number
  - - (): number
    - Returns number
- set: (value: number) => number
  - - (value: number): number
    - Parameters
      - value: number
      Returns number

useDebounce

useDebounce<T>(watchFn: (() => T) | Ref<T> | ComputedRef<T>, wait?: number): useDebounceAPI<T>

- Defined in vx-hooks/src/useDebounce/index.ts:71
防抖值
summary

通过监听观察对象的变化，延时修改目标值

tips
1. 因为使用了 watch，所以只在观察对象值变化时，触发更新
2. 内部对 wait 缩短的 0.01s, 因为回调触发是在延时时间结束后，如果我们配合在 async await 中使用，我们直接配置 wait 作为间隔时间，将无法观察到值的变化.
example
```
const watchVal = ref(0)
const { state, watchStop, cancel } = useDebounce(watchVal)

watchval.value = 1
watchval.value = 2
watchval.value = 3

console.log(state.value) // 0

// 延时更新
// delay 1s
console.log(state.value) // 3


// 取消某次赋值
watchval.value = 4
cancel()

//delay 1s
console.log(state.value) // 3
watchval.value = 4
//delay 1s
console.log(state.value) // 4


// 中断监听
watchStop()
watchval.value = 5
// delay 2s
console.log(state.value) // 4
```
Type parameters
- T
Parameters
- watchFn: (() => T) | Ref<T> | ComputedRef<T>
  
  watch 被监听函数 / 取值函数
- wait: number = 1
  
  延时时常(s)
Returns useDebounceAPI<T>

useDebounceFn

useDebounceFn<T>(fn: T, wait?: number): useDebounceFnAPI

- Defined in vx-hooks/src/useDebounceFn/index.ts:39
防抖
example
```
const submit = async(d) => { console.log(d) }
const { run, cancel } = useDebounceFn(submit, 1)

run(1)
run(2)
run(3)

// delay 1s
=> 3
```
Type parameters
- T: (...args: any) => any
Parameters
- fn: T
  
  回调函数
- wait: number = 1
  
  延时时常(s)
Returns useDebounceFnAPI

useDrag

useDrag(dataSign?: string): UseDragAPI

- Defined in vx-hooks/src/useDrop/index.ts:40
DOM 拖拽绑定
example
```
const { bindEle } = useDrag()
const element = document.querySelector('.move-block')
element.onDragstart = bindDragstart({id: 1})
```
Parameters
- dataSign: string = ...
Returns UseDragAPI

}
- elems Ref 已绑定元素列表
- handlers Ref 数据绑定函数
- bindEle any => element => void 接收事件传参，返回dom元素收集器

useDragArea

useDragArea(dropType?: DragCallbackType, events?: DragEvents, dataSign?: string): UseDragAreaAPI

- Defined in vx-hooks/src/useDrop/index.ts:119
拖拽区 hook
example
```
const dropType = {
  onDom(data){
   console.log()
  }
}
const { dragEvents } = useDragArea(dropType)

------
<div class='area' v-on='dragEvents'>
</div>
```
Parameters
- dropType: DragCallbackType = ...
- events: DragEvents = ...
  
  自定义拖拽事件
- dataSign: string = ...
  
  拖拽取值标识
Returns UseDragAreaAPI
- props 拖拽监听函数
- isHovering 是否进入监听区

useHover

useHover(options?: UseHoverOptions): UseHoverAPI

鼠标悬停

example


<div id='area' ref='target'> {{ hoverStatus }} </div>
<button @click='addEvent'> {{ addEvent }} </button>
<button @click='cancelEvent'> {{ cancelEvent }} </button>

setup() {
   const count = ref(0)
   const onEnter = () => {
     count.value += 1
   }
   const onLeave = () => {
     count.value -= 1
   }
   const { target, hoverStatus, addEvent, cancelEvent} = useHover({ onEnter, onLeave })

   return {
     count,
     target,
     hoverStatus,
     addEvent,
     cancelEvent
   }
 }

 target.trigger('mouseenter') // count: 1 hoverStatus: true
 target.trigger('mouseleave') // count: 0 hoverStatus: false

 cancelEvent()
 target.trigger('mouseenter') // count: 0 hoverStatus: false

 addEvent()
 target.trigger('mouseenter') // count: 1 hoverStatus: true

Parameters

options: UseHoverOptions = ...

配置项目

Returns UseHoverAPI

useLocalStorageState

useLocalStorageState<T>(key: string, defaultValue?: T | (() => T)): UseStorageStateAPI<T>

- Defined in vx-hooks/src/useLocalStorageState/index.ts:16
localStorage 缓存

summary

useStorageState 的localStorage柯里化, 具体使用查看 useStorageState

Type parameters
- T
Parameters
- key: string
  
  缓存字段
- Optional defaultValue: T | (() => T)
  
  初始时缓存为空值时，返回的默认值
Returns UseStorageStateAPI<T>

useMap

useMap<T, U>(initVal?: Iterable<readonly [T, U]>): UseMapAPI<T, U>

Map类型 hook

example

<template>
  <div class="home">
    <div>
        <input v-model='newName' />
        <button @click='add'>
            add
      </button>
      <ul>
          <li v-for='name of names' :key='name' @click='remove(name)' > 
                {{ name }}     
        </li>    
      </ul>
    </div>
  </div>
</template>
<script>
import { ref, computed } from 'vue'
import { useMap } from 'vx-hook'
export default {
  setup(){
    const newName = ref('')
    const { map, get, set, remove } = useMap([
      [ 'Rogen', 1 ],  
      [ 'Coco', 2 ],
      [ 'Jim', 3 ]
    ])
    const names = computed(() => [ ...map.keys() ])
    const add = () => set(newName, names.value.length)
      
    return {
      newName,
      names,
      remove
    }
  }
}
</script>

Type parameters

T

map key 类型
U

map value 类型

Parameters

initVal: Iterable<readonly [T, U]> = ...

初始Map配置

Returns UseMapAPI<T, U>

useMouse

useMouse(): { addEvent: () => void; cancelEvent: () => void; state: Ref<{ clientX?: undefined | number; clientY?: undefined | number; pageX?: undefined | number; pageY?: undefined | number; screenX?: undefined | number; screenY?: undefined | number }> }

- Defined in vx-hooks/src/useMouse/index.ts:49
获取鼠标位置信息
summary

绑定 document mousemove 事件, 获取鼠标位置信息

example
```
 const { state, addEvent, cancelEvent } = useMouse()

 // 鼠标移动，获取当前鼠标位置信息
 // mousemove to clientX: 10 clientY: 10
 // state: { clientX: 10, clientY: 10 }
 
 //解绑
 cancelEvent()

 //再次绑定
 addEvent() 
```
Returns { addEvent: () => void; cancelEvent: () => void; state: Ref<{ clientX?: undefined | number; clientY?: undefined | number; pageX?: undefined | number; pageY?: undefined | number; screenX?: undefined | number; screenY?: undefined | number }> }
- addEvent: () => void
  - - (): void
    - Returns void
- cancelEvent: () => void
  - - (): void
    - Returns void
- state: Ref<{ clientX?: undefined | number; clientY?: undefined | number; pageX?: undefined | number; pageY?: undefined | number; screenX?: undefined | number; screenY?: undefined | number }>

useMousewheel

useMousewheel(): UseMousewheelAPI

鼠标滚轮hook

example

<template>
   <input 
   v-model='value' 
   @foucs='canUse'
   @blur='unUse'
   @mousewheel='onMousewheel' />
 </template>
 <script>

 export default {
   setup(){
     const {
       isUp,
       isDown,
       directionY,
       wheelEvent,
       unUse,
       canUse,
       onMousewheel,
     }
     const count = ref(0)
     
     watch(wheelEvent, () => { *
       if(isUp(directionY.value)){
         count.value -= 1
       } *
       if(isDown(directionY.value)){
         count.value += 1
       }
       
     })
     
     return {
       onMousewheel,
       unUse,
       canUse,
     }
   }
 }

Returns UseMousewheelAPI

useMutationObserver

useMutationObserver(conf: useMutationObserverOptions): useMutationObserverAPI

响应元素属性变化

example

{
  template : `
     <div id='box' :style='style' ref='element' @click='change'>
     </div>
   `,
   props: ['handler'],
   setup(props: any){
     const style = ref({
       width: '100px',
       height: '100px'
     })

     const change = () =>{
       style.value = {
         width: '200px',
         height: '200px'
       }
     }

     const { element } = useMutationObserver({
       handler: props.handler
     })

     return{
       style,
       change,
       element, 
     }
   }
}

Parameters

conf: useMutationObserverOptions

Returns useMutationObserverAPI

usePrevious

usePrevious<T>(initVal: T, compare?: (val?: T, oldVal?: T) => boolean): UsePreviousAPI<T>

缓存器

typepropm

T 值类型

example

 const initVal = 0
 const compare = (__?: number, oldVal?: number) => {
   console.log(oldVal, oldVal === undefined || oldVal < 10)
   return oldVal === undefined || oldVal < 10
 }
 const { curRef, prevRef } = usePrevious<number>(initVal, compare)
 console.log(curRef.value) // 0
 console.log(prevRef.value) // undefined

 const target1 = curRef.value = 5
 console.log(curRef.value) // 5
 console.log(prevRef.value) // 0

 const target2 = curRef.value = 12
 console.log(curRef.value) // 12
 console.log(prevRef.value) // 5 
 
 const target3 = curRef.value = 15
 console.log(curRef.value) // 5
 console.log(prevRef.value) // 12

Type parameters

Parameters

initVal: T

初始值
Optional compare: (val?: T, oldVal?: T) => boolean

更新判断函数
- - (val?: T, oldVal?: T): boolean
  - Parameters
    - Optional val: T
    - Optional oldVal: T
    Returns boolean

Returns UsePreviousAPI<T>

useSessionStorageState

useSessionStorageState<T>(key: string, defaultValue?: T | (() => T)): UseStorageStateAPI<T>

- Defined in vx-hooks/src/useSessionStorageState/index.ts:16
sessionStorage 缓存

summary

useStorageState sessionStorage柯里化, 具体使用查看 useStorageState

Type parameters
- T
Parameters
- key: string
  
  缓存字段
- Optional defaultValue: T | (() => T)
  
  初始时缓存为空值时，返回的默认值
Returns UseStorageStateAPI<T>

useSet

useSet<T>(initVal?: Iterable<T>): UseSetAPI<T>

Set 类型 hooks

summary

对Set类型做的hook封装，利用Set的幂等性

exports

const [ set, utils ] = useSet([ 1, 2 ])

添加
set.add(3) ==> [1, 2, 3]
set.add(2) ==> [1, 2, 3]

移除
set.remove(1) ==> [2, 3]

重置
set.reset()  ==> [1, 2]


其他Set方法

校验
set.value.has(1) ==> true

遍历
const newList = [...set.value].map(num => num + 1)  ==> [ 2, 3 ]

Type parameters

Parameters

initVal: Iterable<T> = ...

初始数据

Returns UseSetAPI<T>

useSetRef

useSetRef<T>(initVal: T): UseSetRefAPI<T>

- Defined in vx-hooks/src/useSetRef/index.ts:35
仿 react ref
example
```
const { state, setState } = useSetRef(0)
setState(10)

console.log(state.value)
=> 10
```
Type parameters
- T
  
  值类型
Parameters
- initVal: T
  
  T 初始值
Returns UseSetRefAPI<T>

useSize

useSize(target?: Ref<HTMLElement | undefined>): { element: Ref<undefined | HTMLElement>; observer: Ref<undefined | MutationObserver>; state: Ref<{ clientHeight: number; clientWidth: number; height: number; offsetHeight: number; offsetWidth: number; scrollHeight: number; scrollWidth: number; width: number }>; watchStop: WatchStopHandle }

- Defined in vx-hooks/src/useSize/index.ts:55
响应尺寸变化
example
```
<div id='box' ref='element' :style='style' @click='onChange'> {{ state }} </div>

const style = ref({width: '100px', height: '100px', background: 'orange'})
const { state, element } = useSize()
const onChange = () => {
 style.value = {...style.value, width: `${parseInt(Math.random() * 400)}px`, height: `${parseInt(Math.random() * 400)}px`}
}
```
Parameters
- Optional target: Ref<HTMLElement | undefined>
  
  预设dom
Returns { element: Ref<undefined | HTMLElement>; observer: Ref<undefined | MutationObserver>; state: Ref<{ clientHeight: number; clientWidth: number; height: number; offsetHeight: number; offsetWidth: number; scrollHeight: number; scrollWidth: number; width: number }>; watchStop: WatchStopHandle }
- element: Ref<undefined | HTMLElement>
- observer: Ref<undefined | MutationObserver>
- state: Ref<{ clientHeight: number; clientWidth: number; height: number; offsetHeight: number; offsetWidth: number; scrollHeight: number; scrollWidth: number; width: number }>
- watchStop: WatchStopHandle

useStorageState

useStorageState<T>(storage: Storage, key: string, defaultValue?: T | (() => T)): { state: Ref<undefined | null | T>; update: (value?: T | null) => void }

- Defined in vx-hooks/src/useStrongeState/index.ts:53
strong 本地缓存
example
```
sessionStorage.setItem('data', 10)
const { state, update } = useStorageState(sessionStorage, 'data', 20)
console.log(state.value) // 10
update(40)
console.log(state.value, sessionStorage) // undefined
update()
console.log(state.value, sessionStorage) // undefined
```
Type parameters
- T
Parameters
- storage: Storage
  
  缓存类型 sessionStorage | localStorage
- key: string
  
  缓存字段
- Optional defaultValue: T | (() => T)
  
  初始时，字段为空时的默认值
Returns { state: Ref<undefined | null | T>; update: (value?: T | null) => void }
- state: Ref<undefined | null | T>
- update: (value?: T | null) => void
  - - (value?: T | null): void
    - Parameters
      - Optional value: T | null
      Returns void

useThrottle

useThrottle<T>(watchFn: (() => T) | Ref<T> | ComputedRef<T>, wait?: number): UseThrottleAPI<T>

- Defined in vx-hooks/src/useThrottle/index.ts:48
节流值
summary

使用节流函数更新对应响应值, 时间间隔将小于配置时间时间间隔 => 等待时间 - 0.01s

example
```
const watchVal = ref(0)
const { state } = useThrottle(watchVal, 2)

watchval.value = 1
// dely 1
watchval.value = 2
watchval.value = 3
watchval.value = 4
// dely 1
console.log(state.value)
=> 1
```
Type parameters
- T
  
  监听值类型
Parameters
- watchFn: (() => T) | Ref<T> | ComputedRef<T>
  
  监听对象
- wait: number = 1
  
  延时时常(s)
Returns UseThrottleAPI<T>

useThrottleFn

useThrottleFn<T>(fn: T, wait?: number): UseThrottleFnAPI

- Defined in vx-hooks/src/useThrottleFn/index.ts:38
节流
example
```
const cb = (d) => console.log(d)
const { run, cancel } = useThrottleFn(cb, 1)

run(1)
// dely 1s

run(2)
run(3)

=> 1
```
Type parameters
- T: (...args: any) => any
  
  回调函数类型
Parameters
- fn: T
  
  回调
- wait: number = 1
  
  延时间隔(s)
Returns UseThrottleFnAPI

useTimeLoop

useTimeLoop(callback: Fn, t?: number): useTimeLoopAPI

- Defined in vx-hooks/src/useTimeout/index.ts:36
定时执行器 interval hook

summary

通过 setInterval 实现的轮询定时器

Parameters
- callback: Fn
  
  回调
- t: number = 0
  
  时间间隔(s)
Returns useTimeLoopAPI

useTimeout

useTimeout(callback: Fn, t?: number): UseTimeoutAPI

- Defined in vx-hooks/src/useTimeout/index.ts:107
定时器 timeout
summary

使用 timeout 实现的定时器，兼容Promise回调，当回调返回Promise时，将等待Promise执行完成后，出入下一次计时

exmaple
```
const { run, stop, isRun } = useTimeout()
async function update(){
  try{
     await API.update()  
  }catch(e){
     console.error(e)
     stop()
  }
}
```
tips

中断处理:

对于callback为Promise的情况, callback内执行stop。存在clearTimeout无法中断循环的情况, 主要因为clearTimeout清理的是timeout的执行, 必须在回调执行前。所以 run 循环需要通过 isRun 判断是否执行下一计时器. 统一将中断封装为 stop 函数
Parameters
- callback: Fn
  
  (function | Promise) 执行回调
- t: number = 0
  
  时间间隔(s)
Returns UseTimeoutAPI

useToggle

useToggle<T, U>(initStatus?: T | boolean, reverseValue?: U | boolean): UseToggleAPI<T, U>

转换hook

example

const { currentStatus, toggle, setLeft as open, setRight as close } = useToggle('open', 'close')

 模板
 <div>

     <h1> {{ currentStatus }} </h1>
     <button @click='toggle'> toggle </button>
     <button @click='open'> open </button>
     <button @click='close'> close </button>
     
 </div>

vue3.0 hook 工具包

hooks

State

SideEffect

Cache

Dom

Index

Interfaces

Type aliases

Variables

Functions

Type aliases

BaseTarget

Type parameters

T = HTMLElement

Fn

Type declaration

Parameters

Rest ...args: any[]

Returns any

MouseWheelDirectionX

MouseWheelDirectionY

MouseWheelDirectionZ

MouseWheelType

TargetElement

Variables

Const defaultMutationObserverInit

Type declaration

attributes: boolean

Functions

Const curry

Type parameters

T: (...args: any) => any

Parameters

fn: T

preArgs: any[] = ...

Returns (...args: any) => any

Parameters

Rest ...args: any

Returns any

Const dely

Parameters

time: number

Returns Promise<unknown>

getDragDataSign

Returns string

getTargetElement

Parameters

target: BaseTarget<TargetElement>

Optional defaultElement: TargetElement

Returns TargetElement | undefined | null

mouseWheelTypeMap

Parameters

n: number

Returns MouseWheelType

Const pipe

Parameters

Rest ...fns: ((...args: any[]) => any)[]

Returns (arg?: any) => any

Parameters

Optional arg: any

Returns any

useBool

Parameters

initStatus: boolean = false

Returns UseBoolAPI

useClickAway

Parameters

onClickAway: (evn: MouseEvent) => void

Parameters

evn: MouseEvent

Returns void

Optional dom: Ref<BaseTarget | BaseTarget[]>

type: string = 'click'

Returns UseClickAwayAPI

useCounter

Parameters

initVal: number

options: UseCounterOptions = ...

Returns { current: Ref<number>; dec: (delta?: number) => number; inc: (delta?: number) => number; reset: () => number; set: (value: number) => number }