组合式API与传统对比

组合式API

众所周知传统的选项式API风格，是基于对象的组织方式，将组件的逻辑分散在多个选项中，如adta、methods、computed、watch等。每个选项都有其明确的职责，结构清晰，对于中小型应用来说高效且易于理解。

而组合式API是一种基于函数的组织方式，允许开发者将组件的逻辑代码拆分成多个独立的函数，每个函数负责处理特定的功能或逻辑、这种方式提高了代码的可读性和可维护性。

直观代码对比

组合式

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="updateMessage">Update Message</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Options API!'  
    };  
  },  
  methods: {  
    updateMessage() {  
      this.message = 'Message updated using Options API!';  
    }  
  }  
};  
</script>

选项式

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="updateMessage">Update Message</button>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  setup() {  
    const message = ref('Hello, Composition API!');  
  
    function updateMessage() {  
      message.value = 'Message updated using Composition API!';  
    }  
  
    return {  
      message,  
      updateMessage  
    };  
  }  
};  
</script>

生命周期管理

选项式API：在Vue2中使用了一系列的生命周期钩子函数来管理组件的生命周期。

组合式API：在Vue3通过函数的方式来管理组件的生命周期。可以使用onMounted、onUpdated、onUnmounted等函数来注册生命周期回调函数。

TypeScript支持

选项式API：在TS下的类型推断相对较弱，容易导致类型错误。

组合式API：使用了函数的方式来组织代码，使得在类型推断上更加友好。

使用场景

选项式API：更适合用于中小型的应用开发。其结构清晰明了，易于上手，可以快速构建出满足需求的应用。

组合式API：更适合用于大型或复杂应用开发。通过将逻辑代码拆分成独立的函数单元，可以更好地组织和管理代码，提高可读性和可维护性。