【vue3】Options APIとComposition APIの違いをわかりやすく解説

2024年8月16日2024年9月10日

今回は、Vue 3でよく話題になる「Options API」と「Composition API」の違いについてお話しします。

どちらもVue 3で使える機能ですが、「何が違うんんすか？」という方もいますよね。

それぞれの特徴や使い方を理解することで、あなたのプロジェクトに最適な選択ができるようになりましょう。

Options APIとは

まず、Options APIについて見ていきましょう。

Options APIは、Vue 2から使われている従来の書き方で、Vue 3でも引き続きサポートされています。

こちらは、Vueの公式ドキュメントや多くのチュートリアルで馴染みのある形式で、以前からのvueを使用している方にもわかりやすいものだと思います。

Options APIでは、コンポーネントをオブジェクト形式で定義します。

このオブジェクトには、data、methods、computed、watchなど、コンポーネントの各要素がオプションとしてまとめられています。

Options APIでの書き方

具体的なコード例を見てみましょう。

export default {
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    },
  },
};

この例では、dataオプションで状態（messageとcount）を定義し、methodsオプションでメソッドを定義しています。

また、computedオプションでは計算プロパティを、watchオプションでは状態の変化を監視するウォッチャーを定義しています。

Composition APIとは

次に、Composition APIについて説明します。

Composition APIはVue 3で導入された新しい書き方で、

コンポーネントのロジックをより柔軟に、再利用しやすく管理できるように設計されています。

Composition APIでは、関数を使ってコンポーネントのロジックを定義します。

これにより、複数のロジックを一つの関数にまとめたり、

他のコンポーネント間でロジックを共有したりすることが簡単になります。

React Hooksがわかる方はそのイメージが近いですね。

ちなみにCompositionとは「構成、組み立て」という意味があります。

ロジックを合成関数としてカプセル化することからこの名前がついているのかもしれませんね。

カプセル化とは？
オブジェクトにあるデータを包んで、オブジェクト外からの不正なアクセスから守るようにすること。

Composition APIでの書き方

それでは、同じ機能をComposition APIでどのように書くか見てみましょう。

import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return {
      message,
      count,
      increment,
      reversedMessage,
    };
  },
};