Vue 3 Composition API: Dari Dasar Hingga Mahir

Composition API adalah cara modern menulis komponen Vue 3 yang lebih terstruktur dan reusable.

Mengapa Composition API?

• Logic dapat dikelompokkan berdasarkan concern, bukan lifecycle

• Lebih mudah di-extract ke composable function

• TypeScript support yang lebih baik

• Kode lebih bersih di komponen besar

Setup Dasar

<script setup>
import { ref, computed, onMounted } from 'vue'
const count = ref(0) const doubled = computed(() => count.value * 2)
onMounted(() => {   console.log('Component mounted') }) </script>

Custom Composable

// composables/useCounter.js
export function useCounter(initial = 0) {
  const count = ref(initial)
  const increment = () => count.value++
  const reset = () => count.value = initial
  return { count, increment, reset }
}

Penggunaan di Komponen

<script setup>
import { useCounter } from '@/composables/useCounter'
const { count, increment, reset } = useCounter(10)
</script>