Vue3 のコンポジション API とオプション API の違いは何ですか?

Vue3 のコンポジション API とオプション API は、Vue.js フレームワークの 2 つの異なる API であり、Vue コンポーネントを作成するときにコードを編成するさまざまな方法を提供します。しかし、それらの違いは何でしょうか？

あなたがシェフであれば、オプション API はキッチンで使用する従来の調理器具のようなもので、キャビネットに保管されていつでも使用できます。これらのツールには、ナイフ、フォーク、スプーンなどが含まれます。これらを使用して食べ物を準備し、料理のスキルを次のレベルに引き上げることができます。

また、Composition API はキッチンで使用する最新のツールのようなもので、電動ミキサーやスマートオーブンなどが含まれます。これらのツールは、調理タスクをより迅速かつ簡単に完了するのに役立ち、料理のスキルを次のレベルに引き上げます。

ここで、違いをよりよく理解するためにコード例を見てみましょう。

ウェルカムメッセージを表示するという単純な関数を実装する Vue コンポーネントがあるとします。

オプション API を使用すると、次のように記述できます。

<template>  
  <div>{
   
   { greeting }}</div>  
</template>  
  
<script>  
export default {
      
        
  data() {
      
        
    return {
      
        
      greeting: "Welcome to my app!"  
    };  
  }  
};  
</script>

Comboposition API を使用すると、次のように記述できます。

<template>  
  <div>{
   
   { message }}</div>  
</template>  
  
<script>  
import {
      
       reactive } from 'vue';  
  
export default {
      
        
  setup() {
      
        
    const state = reactive({
      
        
      message: "Welcome to my app!"  
    });  
    return {
      
       message: state.message };  
  }  
};  
</script>

上記は 2 つの簡単なコード例で、Options API は data 属性を使用してコンポーネントのデータを定義し、Composition API は setup 関数を使用してコンポーネントの状態を定義していることがわかります。これは、2 つの API の主な違いの 1 つです。

さらに、Composition API は、関数コンポーネントを使用できる、props に直接アクセスできる、ref と computed を使用できるなど、より多くの機能と利点も提供します。これらの機能により、コンポーネントはより柔軟で保守しやすくなります。

要約すると、オプション API とコンポジション API は Vue.js フレームワークの 2 つの異なる API であり、Vue コンポーネントを作成するときにコードを編成するさまざまな方法を提供します。Options API は従来の調理ツールに似ており、Composition API は最新のツールに似ています。Comboposition API を使用すると、より柔軟で保守しやすくなりますが、さらなる学習と理解が必要です。

違いをよりよく理解するためにコード例を見てみましょう。

現在時刻を表示するという単純な関数を実装する Vue コンポーネントがあるとします。

オプション API を使用すると、次のように記述できます。

<template>  
  <div>{
   
   { time }}</div>  
</template>  
  
<script>  
export default {
      
        
  data() {
      
        
    return {
      
        
      time: new Date().toLocaleTimeString()  
    };  
  },  
  mounted() {
      
        
    this.$watch('time', () => {
      
        
      this.$forceUpdate();  
    });  
  }  
};  
</script>

Comboposition API を使用すると、次のように記述できます。

<template>  
  <div>{
   
   { time }}</div>  
</template>  
  
<script>  
import {
      
       reactive } from 'vue';  
  
export default {
      
        
  setup() {
      
        
    const state = reactive({
      
        
      time: new Date().toLocaleTimeString()  
    });  
    return {
      
       time: state.time };  
  }  
};  
</script>

Vue3 のコンポジション API とオプション API の違いは何ですか?

おすすめ