---

前言

Vue.js 提供了两种主要的 API 风格来组织组件的代码：选项式 API（Options API）和组合式 API（Composition API）。这两种 API 风格在 Vue 3 中都得到了支持，但组合式 API 是在 Vue 3 中引入的新特性，旨在解决大型组件中逻辑难以组织和复用的问题。

接下来我们来使用一个时钟的案例来展示同样的用法，不通的代码风格。

---

一、选项式 API（Options API）

在 Vue 2 和 Vue 3 中，选项式 API 是默认的 API 风格。它使用 export default 返回一个对象，该对象包含组件的各种选项，如 data、methods、computed、watch、mounted 等。

1. 代码

<script>
//选项式 API
export default {
  data() {
    return {
        msg: '选项式 API时钟功能',
        currentTime: ''
    };
  },
  methods: {
    updateTime() {  
      const now = new Date();  
      this.currentTime = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;  
    } 
  },
  mounted() {
    this.updateTime(); // 在组件加载时获取一次时间  
    setInterval(this.updateTime, 1000); // 每秒更新一次时间  
  },
  beforeDestroy() {  
    clearInterval(this.intervalId); // 在组件销毁前清除定时器  
  }
};
</script>

<template>
   <h1>{{ msg }}</h1>
  <div><p>当前时间: {{ currentTime }}</p></div>
</template>

<style>
  h1{
    color:rgb(0, 255, 115);
  }
</style>

2. 效果

二、组合式 API（Composition API）

组合式 API 是在 Vue 3 中引入的一种新特性，它允许你使用更具函数式编程风格的代码来组织组件逻辑。组合式 API 提供了一系列函数，如 ref、reactive、computed、watch、setup 等，这些函数可以在 setup 函数中一起使用，以定义组件的状态、方法和计算属性。

1. 代码

<!-- 组合式 API -->
<script setup>
import { ref,onMounted,onBeforeUnmount} from 'vue'

// 定时器的引用  
let intervalId = null;
const msg = ref('组合式 API时钟功能')
const currentTime = ref('')

function updateTime() {
    const now = new Date();  
    currentTime.value = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
}

onMounted(() => {
    updateTime(); // 在组件加载时获取一次时间
    intervalId = setInterval(updateTime, 1000); // 每秒更新一次时间     
}) 
onBeforeUnmount(() => {
    clearInterval(this.intervalId); // 在组件销毁前清除定时器  
})
</script>

<template>
   <h1>{{ msg }}</h1>
  <div><p>当前时间: {{ currentTime }}</p></div>
</template>

<style>
  h1{
    color:rgb(0, 255, 115);
  }
</style>

2. 效果

三、两者之间的区别

1. 逻辑组织：组合式 API 允许你将相关的逻辑组合在一起，而不是分散在组件的各个选项中。这有助于提高代码的可读性和可维护性。

2. 代码复用：使用组合式 API，你可以更容易地提取和复用逻辑代码段。你可以创建可复用的函数，这些函数可以接收 ref、reactive 等作为参数，并返回计算属性、方法等。

3. TypeScript 支持：组合式 API 与 TypeScript 配合得更好，因为它允许你明确地定义组件的状态和类型。

4. 响应式系统：组合式 API 提供了更底层的响应式系统 API，如 ref 和 reactive，这些 API 可以更直接地操作响应式数据。

5. 向后兼容性：Vue 3 同时支持选项式 API 和组合式 API，以确保与 Vue 2 的向后兼容性。但是，Vue 官方推荐使用组合式 API 来开发新的 Vue 3 应用程序。

---

总结

回到顶部
总的来说，选择哪种 API 风格取决于你的具体需求和偏好。对于小型、简单的组件，选项式 API 可能已经足够。但是，对于大型、复杂的组件，组合式 API 可以提供更清晰、更可维护的代码结构。