如何用Vue 3制作一个动态计时器

在现代Web开发中，Vue.js被广泛用于构建用户界面和单页应用。而Vue 3的推出，不仅带来了更高的性能，还有新的组合式API，使得我们的开发更加灵活高效。今天，我们将通过一个简单的示例，教你如何使用Vue 3创建一个动态计时器。

项目概述

我们的计时器应用将具备以下功能：

• 显示当前的时间。
• 允许用户开始、暂停和重置计时器。
• 采用Vue 3的组合式API写法，充分利用setup语法糖。

环境准备

确保你的开发环境中已经安装了Node.js和Vue CLI。你可以用以下命令快速创建一个新的Vue 3项目：

vue create vue-timer-app

在创建项目时，选择Vue 3的配置。

目录结构

假设我们创建了一个名为vue-timer-app的项目，最终的目录结构如下：

vue-timer-app/
├── src/
│   ├── components/
│   │   └── Timer.vue
│   ├── App.vue
│   └── main.js
└── ...

编写计时器组件

我们将在src/components目录下创建一个名为Timer.vue的组件。以下是计时器组件的完整代码：

<template>
  <div class="timer">
    <h1>{{ displayTime }}</h1>
    <button @click="startTimer" :disabled="isRunning">开始</button>
    <button @click="pauseTimer" :disabled="!isRunning">暂停</button>
    <button @click="resetTimer">重置</button>
  </div>
</template>

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

export default {
  setup() {
    const isRunning = ref(false);
    const seconds = ref(0);
    const displayTime = ref(formatTime(seconds.value));
    let timerInterval = null;

    const formatTime = (sec) => {
      const minutes = Math.floor(sec / 60);
      const remainingSeconds = sec % 60;
      return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
    };

    const startTimer = () => {
      if (!isRunning.value) {
        isRunning.value = true;
        timerInterval = setInterval(() => {
          seconds.value++;
          displayTime.value = formatTime(seconds.value);
        }, 1000);
      }
    };

    const pauseTimer = () => {
      if (isRunning.value) {
        isRunning.value = false;
        clearInterval(timerInterval);
      }
    };

    const resetTimer = () => {
      isRunning.value = false;
      clearInterval(timerInterval);
      seconds.value = 0;
      displayTime.value = formatTime(seconds.value);
    };

    onUnmounted(() => {
      clearInterval(timerInterval);
    });

    return { displayTime, startTimer, pauseTimer, resetTimer, isRunning };
  }
};
</script>

<style scoped>
.timer {
  text-align: center;
  font-family: Arial, sans-serif;
}
.button {
  margin: 5px;
}
</style>

代码解析

模板部分 (<template>)

在模板中，我们创建了一个简单的用户界面，包含一个用于显示时间的<h1>元素和三个按钮（开始、暂停和重置）。我们使用Vue的事件绑定（如@click）来响应用户的操作。

逻辑部分 (<script>)

在<script>部分，我们使用了组合式API的ref和onUnmounted等特性来管理计时器的状态和生命周期。

• ref用于声明响应式变量：isRunning（计时器是否正在运行）、seconds（计时的秒数）和displayTime（格式化后的时间）。
• startTimer函数用于开始计时器，它会每秒更新一次seconds变量，并格式化为MM:SS的形式。
• pauseTimer函数用于暂停计时器，它会停止计时器的间隔。
• resetTimer函数用于重置计时器，将秒数归零并更新显示。
• 最后，我们使用onUnmounted确保在组件卸载时清理定时器，防止内存泄漏。

样式部分 (<style>)

样式部分我们简单定义了计时器的布局及字体样式。你可以根据自己的喜好进一步完善它。

主程序

最后，我们在App.vue文件中引入这个计时器组件，并显示出来：

<template>
  <div id="app">
    <h1>动态计时器</h1>
    <Timer />
  </div>
</template>

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

export default {
  components: {
    Timer
  }
};
</script>

<style>
#app {
  text-align: center;
  padding: 20px;
}
</style>

运行项目

现在我们已经完成了所有的代码，你可以在项目根目录下运行以下命令启动开发服务器：

npm run serve

打开浏览器并访问http://localhost:8080，你应该能看到一个简单而功能完整的动态计时器。当你点击开始按钮时，计时器会开始计时，点击暂停会停止计时，点击重置会将计时器归零。

总结

在本教程中，我们教你如何使用Vue 3的组合式API创建一个简单的动态计时器组件。Vue 3的新特性让我们的代码更加简洁易懂，也增强了组件的可重用性，为开发者带来了更大的灵活性。