新星计划打卡学习：VUE3组合式API

**新星计划打卡学习：VUE3 组合式 API**

作为 Vue.js 的下一个版本，Vue3 引入了许多新的特性和改进。其中之一就是组合式 API（Composable API）。在本文中，我们将深入探讨 Vue3 中的组合式 API，并通过实例代码示范其使用。

###什么是组合式 API？

组合式 API 是一种新颖的方式来组织和重用 Vue 组件中的逻辑。它允许你将相关的状态、计算属性和方法打包成一个单独的模块，进而可以在其他组件中轻松地使用。

### 为什么需要组合式 API？

传统的 Vue 组件通常会包含多个功能，如状态管理、计算属性和事件处理等。随着应用程序的复杂性增加，这些功能可能变得难以维护和重用。在这种情况下，组合式 API 就派上用场了，它可以帮助你将相关逻辑分离出来，使得代码更易于理解和管理。

### 组合式 API 的基本结构一个组合式 API 通常包含以下几个部分：

* **状态（State）**：用于存储组合式 API 中的数据。
* **计算属性（Computed Properties）**：用于根据状态计算出新的值。
* **方法（Methods）**：用于处理事件或执行其他逻辑。

### 实例代码示范下面是一个简单的例子，展示了如何使用组合式 API 来管理一个计时器的状态和行为：

javascript// timer.js (组合式 API)
import { ref, computed } from 'vue';

export default function useTimer() {
 // 状态：当前时间（秒）
 const time = ref(0);

 // 计算属性：格式化时间（分钟、秒）
 const formattedTime = computed(() => {
 return `${Math.floor(time.value /60)}:${time.value %60}`;
 });

 // 方法：开始计时 function start() {
 setInterval(() => {
 time.value++;
 },1000);
 }

 // 方法：停止计时 function stop() {
 clearInterval();
 }

 return { time, formattedTime, start, stop };
}

javascript// Timer.vue (组件)
<template>
 <div>
 <p>时间：{{ formattedTime }}</p>
 <button @click="start">开始计时</button>
 <button @click="stop">停止计时</button>
 </div>
</template>

<script>
import useTimer from './timer.js';

export default {
 setup() {
 const { time, formattedTime, start, stop } = useTimer();

 return {
 time,
 formattedTime,
 start,
 stop,
 };
 },
};
</script>