使用Vue3构建一个计时器应用

使用Vue3构建一个计时器应用

在现代前端开发中，Vue.js作为一个流行的JavaScript框架，以其简洁的语法和强大的功能被广泛使用。在这篇文章中，我们将深入探讨如何使用Vue3构建一个简单而功能齐全的计时器应用。我们将使用Vue3的新特性—— <script setup> 语法糖，来提高代码的可读性和开发的便捷性。

项目概述

计时器应用是一种常见的功能，它可以用于显示经过的时间，或者计时某个事件的持续时间。我们将在这篇文章中实现一个简单的计时器，它具有开始、暂停、重置等功能。

环境准备

在开始之前，请确保你已经安装了Node.js和Vue CLI。如果还没有安装，你可以通过以下命令安装：

npm install -g @vue/cli

创建新的Vue3项目：

vue create timer-app

选择默认配置，然后进入项目目录：

cd timer-app

接下来，安装并启动开发服务器：

npm run serve

创建计时器组件

在src/components目录中创建一个名为Timer.vue的文件，并写入以下内容：

<template>
  <div class="timer">
    <h1>计时器</h1>
    <div class="time">{{ formatTime(elapsedTime) }}</div>
    <div class="controls">
      <button @click="startTimer" :disabled="isRunning">开始</button>
      <button @click="pauseTimer" :disabled="!isRunning">暂停</button>
      <button @click="resetTimer">重置</button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const isRunning = ref(false); // 是否正在计时
const elapsedTime = ref(0); // 已耗时（以毫秒为单位）
let intervalId = null; // setInterval的ID

const formatTime = (milliseconds) => {
  const seconds = Math.floor((milliseconds / 1000) % 60);
  const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
  const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
};

// 启动计时器
const startTimer = () => {
  if (isRunning.value) return; // 如果已经在计时，直接返回
  isRunning.value = true; // 更新状态为“正在计时”
  intervalId = setInterval(() => {
    elapsedTime.value += 1000; // 每秒累加1000毫秒
  }, 1000);
};

// 暂停计时器
const pauseTimer = () => {
  isRunning.value = false; // 更新状态为“暂停”
  clearInterval(intervalId); // 清除计时器
};

// 重置计时器
const resetTimer = () => {
  isRunning.value = false; // 更新状态为“已重置”
  clearInterval(intervalId); // 清除计时器
  elapsedTime.value = 0; // 将已耗时设置为0
};

// 组件销毁时清除计时器
watch(isRunning, (newValue) => {
  if (!newValue && intervalId) {
    clearIntervalId);
  }
});
</script>

<style scoped>
.timer {
  text-align: center;
  padding: 20px;
}

.time {
  font-size: 2em;
  margin: 20px 0;
}

.controls button {
  margin: 0 5px;
  padding: 10px 15px;
  font-size: 1em;
}
</style>

组件代码解析

1. 数据声明与引用：

   • 我们使用了ref来创建响应式数据isRunning，elapsedTime，它们分别表示计时器是否在运行和记录的时间。

2. 时间格式化函数：

   • formatTime函数用来将毫秒转换为时分秒格式，确保显示的时间符合人们的阅读习惯。

3. 计时器控制函数：

   • startTimer、pauseTimer和resetTimer分别实现开始、暂停和重置计时器的功能。

4. watch监听：

   • 我们使用watch来监听isRunning状态的变化，确保在计时器暂停或销毁时及时清除计时器。

5. 样式：

   • 在样式部分，我们利用scoped关键字，确保样式只作用于当前组件，避免与其他组件样式冲突。

在App.vue中使用

现在我们已经完成了计时器组件的创建，接下来需要在src/App.vue中引入并使用这个计时器组件：

<template>
  <div id="app">
    <Timer />
  </div>
</template>

<script setup>
import Timer from './components/Timer.vue';
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

总结

通过上述步骤，我们成功地使用Vue3构建了一个简单的计时器应用。这个应用不仅展示了Vue3的组件化特性，同时也让我们体验到了<script setup>语法糖带来的便利。

最终的代码结构简单明了，所有的逻辑都清晰地封装在了一个组件中。这种开发方式能帮助我们更好地组织代码，提升开发效率。

今后，你可以基于这个计时器基础功能进行扩展，例如添加声音提醒、设置倒计时功能、保存历史记录等，以实现更多的需求。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情