はじめに
Vue.jsチュートリアルで学んだことをアウトプットしていきます。
概要
Vueコンポーネントの作成方法として、OptionsAPIとCompositionAPIの２種類のAPIスタイルがあります。
OptionsAPI
Vueコンポーネントを構築する従来の方法です。これまでVue2で採用されてきました。
data,methods,computed,watchといった複数のオプションから構成される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>
OptionsAPIのメリット
- オプションを分けて定義するため、コードの構造が明確で読みやすい
- 従来のVueで採用されていたこともあり、ドキュメントが豊富で学習しやすい
OptionsAPIのデメリット
- コンポーネントのロジックを再利用することが難しい
（リアクティブな値へアクセスするためにthisを経由する必要があるため、viewからロジックを切り離すことができないため）
CompositionAPI
ロジックを合成関数（composition function）としてカプセル化することで、コンポーネント間でのロジックの再利用を可能にした方法。
<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>
CompositionAPIのメリット
- 複数のコンポーネント間でロジックや状態を抽出し、外部で再利用しやすい
→Vue2（OptionsAPI）では難しかった、「viewからロジックを切り離す」ことができるようになる。
CompositionAPIのデメリット
- 自由にロジックを切り出せる反面、これまでのVueのルールから外れるためにコードが複雑化しやすくなる
- 関心の分離を意識したコンポーネントの設計力（ロジックとデザインをどう分離するかなど）が求められる
まとめ
- OptionsAPIは様々なオプションによりロジックを定義する従来の方法
- CompositionAPIは自由度が高く、ロジックを分離して再利用がしやすい新たな方法