---

前言

在Vue项目中，封装一个计时器挂钩（Hook）是一种实用的技术，它允许你在组件中方便地管理定时任务，如倒计时、计时器等，而无需在每个使用场景重复编写相同的逻辑代码。

---

计时器钩子

自己封装一个计时器useTimer.vue

import { ref, onMounted, onUnmounted } from 'vue';  export  function useTimer(initialSeconds: number, onTick: (arg0: number) => void) {  const seconds = ref(initialSeconds);  const timerId:any = ref(null);  const isActive = ref(false);  function startTimer() {  if (isActive.value) return;  isActive.value = true;  timerId.value = setInterval(() => {  seconds.value--;  if (seconds.value < 0) {  resetTimer();stopTimer();  onTick(0);  } else {  onTick(seconds.value);  }  }, 1000);  }  function stopTimer() {  if (!isActive.value) return;  isActive.value = false;  clearInterval(timerId.value);  timerId.value = null;  }  function resetTimer() {  // stopTimer();  seconds.value = initialSeconds;  }  onMounted(() => {  if (initialSeconds > 0) {  startTimer();  }  });  onUnmounted(() => {  stopTimer();  });  return {  seconds,  startTimer,  stopTimer,  resetTimer,  };  
}

使用：

<template><div><p class="my-5">剩余时间: {{ timer.seconds }} 秒</p><div class="my-5"><v-btn my-5 color="success" @click="timer.startTimer">开始</v-btn></div><div class="my-5"><v-btn color="info" @click="timer.stopTimer">暂停</v-btn></div><div class="my-5"><v-btn color="secondary" @click="timer.resetTimer">重置</v-btn></div></div>
</template><script>
import { useTimer } from '@/hooks/useTimer';export default {setup() {const timer = useTimer(10, (remainingSeconds) => {console.log(`计时器剩余时间: ${remainingSeconds} 秒`);});return {timer,};},
};
</script>

效果：

---

总结

愿离别之花，开得绚丽多彩， 在人生的旅途中，照亮前行的路。