Vueについて

過去の案件で使用していたものの、なんとなく、でこなしていた間のあるVueについて改めて整理する。 案件対応当時はVue2系だったので、Vue3系を改めてチュートリアルから確認する。 今回の個人開発ではVue3系を使用する想定。

APIスタイル

Vueコンポーネントの作成には2種類のスタイルが利用できる。

Options API

data、methods、mounted といった数々のオプションからなる 1 つのオブジェクトを用いてコンポーネントのロジックを定義する。

<script>
export default {
  // data() で返すプロパティはリアクティブな状態になり、
  // `this` 経由でアクセスすることができます。
  data() {
    return {
      count: 0
    }
  },

  // メソッドの中身は、状態を変化させ、更新をトリガーさせる関数です。
  // 各メソッドは、テンプレート内のイベントハンドラーにバインドすることができます。
  methods: {
    increment() {
      this.count++
    }
  },

  // ライフサイクルフックは、コンポーネントのライフサイクルの
  // 特定のステージで呼び出されます。
  // 以下の関数は、コンポーネントが「マウント」されたときに呼び出されます。
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

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

Vue2系で使用していた感じ。

Options API の考え方は、「コンポーネントのインスタンス」(サンプルに見られる this) を中心とするもの。

Composition API

Vue3.0から導入された。 ReactのHooksにいた概念で、コンポーネント内のロジックをComposableな関数に抽出し、再利用可能としている。

通常、<script setup> と組み合わせて使用する。 setup という属性を付けることで、Vue にコンパイル時の変形操作を実行してほしいというヒントが伝えられる。

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

// リアクティブな状態
const count = ref(0)

// 状態を変更し、更新をトリガーする関数。
function increment() {
  count.value++
}

// ライフサイクルフック
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

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

リアクティブな状態変数を関数のスコープ内で直接宣言し、複数の関数の組み合わせによって状態を組み立てて複雑な処理を扱おう、という考え方が中心にある。