先聊聊为啥要自己写 CountUp 组件

说实话，hen多人直接把 vue-countup‑v3 扔进项目。

哈哈，它确实Neng跑。

可是你要是想让数字在用户点了暂停键后还Neng继续，或者在数据刷新时瞬间归零再走，那它就有点尴尬。

咱们这回就用 VueUse 的 useRafFn 把动画循环抢下来自己掰着指头写个可暂停、可重置的 CountUp。

别担心，代码量其实不多，核心只有几行。

先确保项目里Yi经装了 @vueuse/core。

Ru果还没装，跑个 pnpm add @vueuse/core。

然后在需要的地方引进去：

import { useRafFn } from '@vueuse/core'

下面我们把动画逻辑抽成一个 Hook，保持组件干净利落。

import { ref, watch } from 'vue'
import { useRafFn } from '@vueuse/core'
interface UseCountUpOptions {
  startVal?: number        // 起始值，默认 0
  endVal: number           // 目标值
  duration?: number        // 动画时长，默认 2000
  autoplay?: boolean       // 是否自动开始
}
export function useCountUp {
  const {
    startVal = 0,
    endVal,
    duration = 2000,
    autoplay = true,
  } = options
  const currentValue = ref
  const isAnimating = ref
  let startTime: number | null = null
  let startValue = startVal
  let targetValue = endVal
  let animDuration = duration
  // 用 requestAnimationFrame 控制每帧计算
  const { pause, resume, isActive } = useRafFn => {
    if  startTime = timestamp
    const elapsed = timestamp - startTime
    const progress = Math.min
    // 简单的 easeOutCubic 缓动，让动画geng自然
    const easeProgress = 1 - Math.pow
    const newVal = startValue +  * easeProgress
    currentValue.value = newVal
    if  {
      currentValue.value = targetValue
      pause               // 动画结束，停止循环
      isAnimating.value = false
    }
  }, { immediate: false })
  // 开始或重新开始动画，可传入新的结束值和时长
  const start =  => {
    if  targetValue = newEnd
    if  animDuration = newDur
    startValue = currentValue.value   // 从当前值继续走
    startTime = null                  // 重置时间基准
    isAnimating.value = true
    resume
  }
  // 暂停动画
  const pauseAnim =  => {
    pause
    isAnimating.value = false
  }
  // 恢复动画，从暂停的那一刻继续走
  const resumeAnim =  => {
    if  {
      startTime = null   // 
从零算起，但保持原来的 startValue/targetValue
      isAnimating.value = true
      resume
    }
  }
  // 重置回起始值并停止动画
  const reset =  => {
    pause
    isAnimating.value = false
    currentValue.value = startVal
    startTime = null
    startValue   = startVal
    targetValue   = endVal   // 保持原来的目标，以防下次直接调用 start
  }
  // 自动播放支持——Ru果传了 autoplay，就立马启动一次动画
  if  {
    start
  }
  // 当外部的 endVal 改变时自动触发新一轮动画
  watch => endVal,  => {
    if  {
      targetValue   = newV
      start
    } else {
      // 正在跑的时候只geng新目标值，不打断当前过程——这就是“动态跳转”
      targetValue   = newV
    }
  })
  return {
    value: currentValue,
    isAnimating,
    start,
    pause: pauseAnim,
    resume: resumeAnim,
   　reset,
    isActive,
 }
}

下面我们写一个Zui小化的 CountUp.vue，把上面的 Hook 包装成 UI。

想要控制暂停、恢复、重置，只需要给子组件加个 然后调用对应的方法。

if  return { value: ref, … }