如何在Vue3中使用组合API和生命周期钩子创建一个定时器？

Vue3 引入了组合API(Composition API)，使得代码结构更加灵活和简洁，特别适合复杂应用的开发。在这篇文章中，我们将探讨如何利用组合API和生命周期钩子在Vue3中实现一个简单的定时器。

什么是组合API？

组合API是Vue3中的一种新的方式来组织代码，它允许我们使用功能组合的方式将相关逻辑聚合在一起。与 Vue2 中的选项API（Options API）相比，组合API更加灵活和可扩展。

Vue3 生命周期钩子

Vue3 的生命周期钩子相对于 Vue2 也有一些变化。以下是常用的一些钩子：

setup()
onBeforeMount()
onMounted()
onBeforeUpdate()
onUpdated()
onBeforeUnmount()
onUnmounted()

利用这些钩子，我们可以在组件的不同阶段执行特定操作。

创建定时器的具体实现

我们将创建一个倒计时组件，该组件从10开始倒计时，并在倒计时结束时发出一个事件通知。

设置项目

首先，新建一个 Vue3 项目并安装必要的依赖。

# 确保你已经安装了 Vue CLI
vue create vue3-timer

# 进入项目目录
cd vue3-timer

定时器组件实现

接下来，我们在 src/components 目录下创建一个新的组件文件 CountdownTimer.vue。

<template>
  <div>
    <p>{{ timer }}</p>
  </div>
</template>

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

export default {
  name: 'CountdownTimer',
  setup(props, { emit }) {
    const timer = ref(10);
    let intervalId = null;

    const startTimer = () => {
      intervalId = setInterval(() => {
        timer.value -= 1;
        if (timer.value <= 0) {
          clearInterval(intervalId);
          emit('countdownFinished');
        }
      }, 1000);
    };

    onMounted(startTimer);

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

    return {
      timer,
    };
  },
};
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

组件解析

模板部分 (template)：
- 简单地显示当前倒计时数值。
逻辑部分 (script)：
- 使用 ref 创建一个响应式的变量 timer，初始值为10。
- startTimer 函数设置一个 setInterval 定时器，每秒减少 timer 的值。
- 当 timer 的值小于等于0时，清除定时器并通过 emit 方法向父组件发送 countdownFinished 事件。
- 在 onMounted 生命周期钩子中，调用 startTimer 方法启动定时器。
- 在 onUnmounted 生命周期钩子中，清除定时器以防止内存泄露。
样式部分 (style)：
- 简单的样式调整，将倒计时数值居中并设置字体大小。

在父组件中使用定时器

我们现在可以在父组件中导入并使用这个倒计时组件。

修改 src/App.vue：

<template>
  <div id="app">
    <CountdownTimer @countdownFinished="handleCountdownFinished" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    CountdownTimer,
  },
  methods: {
    handleCountdownFinished() {
      alert('Countdown Finished!');
    },
  },
};
</script>

<style>
#app {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>

父组件解析

模板部分 (template)：
- 使用倒计时组件 <CountdownTimer /> 并监听 countdownFinished 事件，当倒计时结束时触发 handleCountdownFinished 方法。
逻辑部分 (script)：
- 导入 CountdownTimer 组件并在 components 定义中注册。
- handleCountdownFinished 方法简单地弹出一个提示框，告知用户倒计时已经结束。
样式部分 (style)：
- 通过CSS将整个应用中心对齐。