原题链接 (opens new window)

题目

<script setup lang='ts'>

interface UseCounterOptions {
  min?: number
  max?: number
}

/**
 * 实现计数器函数,确保功能正常工作
 * 1. 加 (+)
 * 2. 减 (-)
 * 3. 重置 
 * 4. 最小值 & 最大值 选项支持
*/
function useCounter(initialValue = 0, options: UseCounterOptions = {}) {

}

const { count, inc, dec, reset } = useCounter(0, { min: 0, max: 10 })

</script>

分析

这个题目想让我们实现一个计数器, 计数器有最大值(10)和最小值(0), 初始值为0, 当我们通过点击加, 减, 重置按钮时, 可以实现相应功能

解决

<script setup lang='ts'>
import {ref} from 'vue'

interface UseCounterOptions {
  min?: number
  max?: number
}

/**
 * Implement the composable function
 * Make sure the function works correctly
*/
function useCounter(initialValue = 0, options: UseCounterOptions = {}) {
	const count = ref<Number>(initialValue)
  const {min,max} = options
  function inc(){
    if(count.value >= max) return 
    count.value++
  }
  function dec(){
    if(count.value <= min) return 
    count.value--
  }
  function reset(){
    count.value = initialValue
  }
  
  return {
    count, inc, dec, reset
  }
}

const { count, inc, dec, reset } = useCounter(0, { min: 0, max: 10 })

</script>

<template>
  <p>Count: {{ count }}</p>
  <button @click="inc">
    inc
  </button>
  <button @click="dec">
    dec
  </button>
  <button @click="reset">
    reset
  </button>
</template>

可以看到, 我们在函数useCounter中传了两个参数, 一个是初始化的值0, 另一个是一个对象, 里面包含最大值和最小值, 在函数内部, 我们定义了响应式变量(count)和三个函数(inc, dec, reset), 最后作为返回值返回, 当我们点击加减重置按钮时, 即可完成相应功能