【Vue.js】Options API、Composition APIの書き方まとめ

Vue.jsで学習している時、様々な書き方があることに気づいたので、

この記事で紹介します。

Vue.jsの3種類の書き方

Options API

1つ目の書き方はOptions APIという書き方です。

こちらはVue初期からある書き方でVue2で主に使われている書き方です。

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

特徴としては

• data、method、computedなどオブジェクト形式で記述する。
• this を使ってアクセスする。

などの特徴があります。

現在でもOptions APIで記述することができますが、書き方が古いので、

後述するComposition APIを利用することを公式が推奨しています。

Composition API setup()

２つ目の書き方はComposition APIでsetup関数を利用する書き方です。

Composition APIとはVue3から追加された書き方です。

そのComposition APIの中でもset up関数を利用する方法です。

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    return { count, increment }
  }
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

特徴としては

• ref や reactive を使って状態を作る。
• オプション API と混在可能。
• テンプレートで使う変数は return 必須。

などの特徴があります。

Composition API <script setup>

３つ目の書き方はComposition APIでscript setup構文を利用する書き方です。

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

特徴としては

• setup() 関数のラップや return が不要。
• 宣言した変数・関数は自動でテンプレートから参照可能。
• import したコンポーネントは自動でテンプレートに使える（登録不要）。

などの特徴があります。

現在のVue3ではこちらの<script setup>を使うことが公式で推奨されています。

まとめ