🧩
🧩 Vue 3 Composition APIの基本まとめ（初心者向け）
🧩 Vue 3 Composition APIの基本まとめ（初心者向け）
Vue 3では、従来のVue 2スタイル（Options API）に加えて、Composition APIという新しい記述方法が導入されました。この記事では、初心者向けにComposition APIの基本的な概念と、よく使われる関数をまとめました。
✅ Composition APIとは？
Vue 3で、コンポーネントのロジックを関数単位で「構成（Composition）」できるようにした仕組みです。
- Vue 2の
data(),methods,computedなどを、1つのsetup関数にまとめられる - コードの再利用性・可読性・管理性が向上
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increase = () => count.value++
</script>
🔧 主な関数まとめ
1. ref() – プリミティブな値をリアクティブにする
const count = ref(0)
count.value++
- 数値、文字列、真偽値など、単一の値に使用
-
.valueを通じてアクセス
2. reactive() – オブジェクトや配列をリアクティブにする
const user = reactive({ name: 'ミンジョン', age: 24 })
user.age++
- 複数の値を持つオブジェクトや配列に便利
-
.valueを使わずに直接アクセス可能
3. computed() – 算出プロパティを定義する
const price = ref(1000)
const qty = ref(2)
const total = computed(() => price.value * qty.value)
-
priceやqtyが変わると、自動的にtotalも再計算される
4. watch() – 値の変化を監視して処理を実行
watch(count, (newVal, oldVal) => {
console.log(`count: ${oldVal} → ${newVal}`)
})
- 値が変化したときに、API呼び出しやログ出力などが可能
5. onMounted() – コンポーネントのマウント時に実行
onMounted(() => {
console.log('コンポーネントがマウントされた')
})
- 他にも
onUnmounted(),onUpdated()などのライフサイクルフックが存在
📌 まとめ表
| 関数 | 説明 | 例 |
|---|---|---|
ref() |
プリミティブ値をリアクティブに | ref(0) |
reactive() |
オブジェクト/配列をリアクティブに | reactive({}) |
computed() |
算出値を作成 | computed(() => ...) |
watch() |
値の変化に反応 | watch(a, () => {}) |
onMounted() |
コンポーネントマウント時に実行 | onMounted(() => {}) |
✨ まとめ
Composition APIはVue 3の最大の進化であり強力な機能です。最初は慣れが必要かもしれませんが、プロジェクトが大きくなるほど、その恩恵を実感できるはずです。小規模なプロジェクトではOptions API、大規模や複雑なロジックが必要な場合にはComposition APIを使ってみましょう！
Discussion