Memahami Composition API di Vue 3 Tanpa Pusing

Ref vs Reactive

Aturan mainnya sederhana: pakai ref untuk nilai tunggal, reactive untuk objek yang bentuknya memang seperti state.

import { ref, reactive } from 'vue'

const counter = ref(0)               // angka, string, boolean
const form = reactive({              // objek form
  name: '',
  email: ''
})

Yang sering bikin tersandung adalah .value. Ingat saja: di dalam script selalu .value, di template tidak perlu.

Computed untuk Turunan Data

Hindari menulis fungsi yang dihitung ulang di banyak tempat. Bungkus jadi computed supaya otomatis di-cache:

const fullName = computed(() =>
  `${form.name}`.trim() || 'Anonim'
)

Computed itu seperti rumus di spreadsheet: berubah kalau bahan bacanya berubah, tidak perlu dipanggil manual.

Composable: Logika yang Dipakai Bersama

Bagian favorit saya. Ambil contoh hook deteksi scroll:

export function useScrollY() {
  const y = ref(0)
  const onScroll = () => (y.value = window.scrollY)
  onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }))
  onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))
  return { y }
}

Sekali ditulis, dipakai di mana saja — sidebar, progress bar, tombol back-to-top.

Kapan Tetap Pakai Options API?

Tidak ada dosa. Untuk komponen kecil yang state-nya statis, Options API masih lega dan mudah dibaca. Tapi begitu logika mulai saling silang — fetch + polling + cleanup — Composition API jauh lebih rapi.

Selamat mencoba, dan jangan lupa TypeScript-kan composables kamu!