<template>
  <div>
    <input v-model="count" />
    <div @click="set(9)">set</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import useCount from './useCount'
export default defineComponent({
  setup() {
    const {
      current: count,
      inc,
      dec,
      set,
      reset
    } = useCount(2, {
      min: 1,
      max: 100
    })
    console.log(count.value, 'count')
    return {
      count,
      inc,
      dec,
      set,
      reset
    }
  }
})
</script>

useCount.ts

import { ref, Ref, watch } from 'vue'

interface Range {
  min?: number;
  max?: number;
}

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

export default function useCount(initVal: number, range?: Range): Result {
  const current = ref(initVal)
  const inc = (delta?: number): void => {
    if (typeof delta === 'number') {
      current.value += delta
      return
    }
    current.value += 1
  }

  const dec = (delta?: number): void => {
    if (typeof delta === 'number') {
      current.value -= delta
      return
    }
    current.value -= 1
  }

  const set = (value: number): void => {
    current.value = value
  }

  const reset = () => {
    current.value = initVal
  }

  watch(current, (newVal: number, oldVal: number) => {
    // console.log(typeof newVal,'====')
    // console.log(range,'range')
    if (newVal === oldVal) return
    if (range && range.min && newVal < range.min) {
      current.value = range.min
    } else if (range && range.max && newVal > range.max) {
      current.value = range.max
    }
  })

  return {
    current,
    inc,
    dec,
    set,
    reset
  }
}