vue3中hooks使用

简单理解就是导出函数将返回的属性或者函数结构出来
userCount.ts

import { ref, Ref, computed } from 'vue'
type countResultObj = {
  count: Ref<number>
  increase: (increaseCount?: number) => void
  decrease: (decreaseCount?: number) => void
}
// 返回的类型是countResultObj中的类型
export const useCount = (init = 10): countResultObj => {
  const count = ref(init)
  // 固定加几？increaseCount参数
  const increase = (increaseCount?: number): void => {
    if (typeof increaseCount !== 'undefined') {
      count.value += increaseCount
    } else {
      count.value += 1
    }
  }
  const decrease = (decreaseCount?: number): void => {
    if (typeof decreaseCount !== 'undefined') {
      count.value -= decreaseCount
    } else {
      count.value -= 1
    }
  }
  return {
    count,
    increase,
    decrease
  }
}

使用

<template>
   <a-button @click="increase(10)">+10</a-button>
   <a-button @click="decrease(10)">-10</a-button>
   <div>测试hooks count:{{ count }}</div>
</template>
import { useCount } from '@/hooks/userCount'
export default defineComponent({
  name: '',
  components: {},
  setup() {
    const { count, increase, decrease } = useCount()
    return {
      count,
      increase,
      decrease
    }
  }
})
</script>

参考：
https://juejin.cn/post/6940454764421316644#heading-19