Vue 3 Composition API 完全ガイド — script setup で生産性3倍へ

Vue 3 の Composition API は、複雑なコンポーネントロジックを整理するための強力な仕組みです。

script setup とは

<script setup> は Composition API をより簡潔に書くためのシンタックスシュガーです。

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

const count = ref(0)
const doubled = computed(() => count.value * 2)

onMounted(() => {
  console.log('Component mounted!')
})
</script>

Composables で再利用可能なロジック

Composables を使うことで、ロジックをコンポーネント間で再利用できます。

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const increment = () => count.value++
  const decrement = () => count.value--
  return { count, increment, decrement }
}

まとめ

Composition API を活用することで、Options API では難しかった複雑なロジックの整理や再利用が容易になります。