Vue 3 Composables Tingkat Lanjut: Pola yang Dapat Digunakan Ulang dan Pertanyaan Interview 2026

Composable telah menjadi mekanisme utama untuk mengekstraksi dan menggunakan ulang logika reaktif di Vue 3. Sejak Composition API diadopsi secara luas oleh komunitas pengembang frontend, kemampuan merancang composable yang robust, type-safe, dan mudah diuji menjadi pembeda utama antara developer senior dan developer tingkat menengah dalam sesi interview teknis. Pada tahun 2026, penguasaan pola-pola composable melampaui sekadar penggunaan ref dan computed -- hal ini mencakup pengelolaan siklus hidup komponen, komposisi fungsi reaktif, dan arsitektur modular untuk aplikasi berskala besar.

Dengan diperkenalkannya Alien Signals sebagai sistem reaktivitas internal baru dan kompatibilitas penuh dengan Vapor Mode di Vue 3.6, performa composable kini memiliki dampak langsung terhadap kecepatan rendering dan efisiensi memori aplikasi. Pemahaman mendalam terhadap pola-pola composable bukan lagi sekadar nilai tambah, melainkan kompetensi inti yang diharapkan dari kandidat posisi mid-level hingga senior di ekosistem Vue.

Artikel ini menganalisis secara komprehensif pola-pola composable Vue 3 tingkat lanjut, mulai dari anatomi composable yang terstruktur dengan baik hingga strategi pengujian, penanganan operasi asinkron, dependency injection, dan validasi form. Setiap pola disertai contoh kode yang dapat diterapkan langsung dalam proyek produksi maupun dalam konteks interview teknis.

Anatomi Composable yang Terstruktur dengan Baik

Composable berkualitas produksi mengikuti beberapa prinsip arsitektural yang konsisten: pengetikan ketat untuk input dan output, pemisahan tanggung jawab yang jelas, serta antarmuka yang dapat diprediksi. Composable useCounter berikut mengilustrasikan konvensi-konvensi fundamental tersebut.

import { ref, computed, type Ref } from 'vue'

interface UseCounterOptions {
  min?: number
  max?: number
  initialValue?: number
}

interface UseCounterReturn {
  count: Ref<number>
  doubled: Ref<number>
  increment: () => void
  decrement: () => void
  reset: () => void
}

export function useCounter(options: UseCounterOptions = {}): UseCounterReturn {
  const { min = 0, max = Infinity, initialValue = 0 } = options

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

  function increment() {
    if (count.value < max) count.value++
  }

  function decrement() {
    if (count.value > min) count.value--
  }

  function reset() {
    count.value = initialValue
  }

  return { count, doubled, increment, decrement, reset }
}

Beberapa aspek penting dari implementasi ini layak mendapat perhatian khusus. Interface UseCounterOptions mendefinisikan kontrak konfigurasi yang jelas, sementara UseCounterReturn mendokumentasikan dengan presisi apa saja yang diekspos oleh composable. Penggunaan destructuring dengan nilai default pada body fungsi menjamin perilaku yang konsisten meskipun tanpa konfigurasi eksplisit dari pemanggil.

Pengembalian objek bernama (bukan array) memungkinkan konsumen untuk memilih hanya properti yang dibutuhkan melalui destructuring. Konvensi ini, yang telah diadopsi secara luas di seluruh ekosistem Vue, meningkatkan keterbacaan dan kemudahan pemeliharaan kode pemanggil. Setiap pemanggilan useCounter() menghasilkan instance state yang independen, sehingga mengeliminasi sepenuhnya masalah state yang terbagi antar komponen yang pernah menjadi kendala utama pada era mixin.

Batas min dan max mengilustrasikan pola yang sering ditemui dalam composable produksi: validasi batasan bisnis langsung di dalam logika reaktif. Pendekatan ini mencegah penyebaran aturan validasi ke berbagai komponen konsumer dan menjaga konsistensi perilaku di seluruh aplikasi.

Composable Asinkron dengan Penanganan Error dan Status Loading

Pengelolaan permintaan HTTP merupakan salah satu kasus penggunaan composable yang paling umum dijumpai. Composable asinkron yang dirancang dengan baik harus mampu menangani seluruh siklus hidup permintaan: status loading, respons sukses, penanganan error, dan pembatalan request. Pola berikut mengintegrasikan watchEffect untuk reaktivitas otomatis dan AbortController untuk pembatalan permintaan yang bersih.

import { ref, watchEffect, onUnmounted, toValue, type Ref, type MaybeRefOrGetter } from 'vue'

interface UseFetchReturn<T> {
  data: Ref<T | null>
  error: Ref<string | null>
  isLoading: Ref<boolean>
  refresh: () => Promise<void>
}

export function useFetchData<T>(
  url: MaybeRefOrGetter<string>
): UseFetchReturn<T> {
  const data = ref<T | null>(null) as Ref<T | null>
  const error = ref<string | null>(null)
  const isLoading = ref(false)
  let abortController: AbortController | null = null

  async function fetchData() {
    // Cancel any in-flight request
    abortController?.abort()
    abortController = new AbortController()

    isLoading.value = true
    error.value = null

    try {
      const response = await fetch(toValue(url), {
        signal: abortController.signal
      })
      if (!response.ok) throw new Error(`HTTP ${response.status}`)
      data.value = await response.json()
    } catch (err) {
      if (err instanceof DOMException && err.name === 'AbortError') return
      error.value = err instanceof Error ? err.message : 'Unknown error'
    } finally {
      isLoading.value = false
    }
  }

  // Re-fetch when URL changes reactively
  watchEffect(() => {
    fetchData()
  })

  onUnmounted(() => abortController?.abort())

  return { data, error, isLoading, refresh: fetchData }
}

Penggunaan MaybeRefOrGetter<string> untuk parameter url memberikan fleksibilitas maksimal: konsumen dapat mengoperkan string statis, sebuah ref, atau getter function. Fungsi toValue() secara otomatis menyelesaikan tipe yang mendasarinya, baik itu nilai mentah maupun nilai reaktif.

Mekanisme pembatalan melalui AbortController mencegah race condition, yaitu masalah klasik yang terjadi ketika permintaan baru dipicu sebelum permintaan sebelumnya selesai diproses. Hook onUnmounted menjamin pembersihan permintaan yang sedang berlangsung saat komponen dihancurkan, sehingga mencegah kebocoran memori dan pembaruan state pada komponen yang sudah tidak terpasang di DOM.

Metode refresh yang diekspos dalam nilai kembalian memungkinkan komponen konsumer untuk memicu pemuatan ulang data secara manual. Pola ini sangat penting untuk aksi pengguna seperti tombol "Muat Ulang" atau mekanisme retry setelah kegagalan jaringan.

Komposisi Composable: Abstraksi Tingkat Lanjut

Kekuatan sesungguhnya dari composable terletak pada kemampuannya untuk saling berkomposisi. Sebuah composable tingkat tinggi dapat mengorkestrasi beberapa composable khusus untuk menciptakan fungsionalitas yang kompleks sambil tetap mempertahankan pemisahan tanggung jawab yang jelas. Pola berikut menggabungkan pencarian dengan debounce, paginasi, dan pemuatan data dalam satu unit yang kohesif.

import { ref, computed, watch, type Ref } from 'vue'
import { useFetchData } from './useFetchData'
import { useDebouncedRef } from './useDebouncedRef'

interface UsePaginatedSearchReturn<T> {
  query: Ref<string>
  page: Ref<number>
  results: Ref<T[] | null>
  totalPages: Ref<number>
  isLoading: Ref<boolean>
  error: Ref<string | null>
  nextPage: () => void
  prevPage: () => void
}

export function usePaginatedSearch<T>(
  baseUrl: string,
  perPage = 20
): UsePaginatedSearchReturn<T> {
  const query = useDebouncedRef('', 300)
  const page = ref(1)
  const totalPages = ref(1)

  const apiUrl = computed(
    () => `${baseUrl}?q=${encodeURIComponent(query.value)}&page=${page.value}&limit=${perPage}`
  )

  const { data, error, isLoading } = useFetchData<{ items: T[]; total: number }>(apiUrl)

  const results = computed(() => data.value?.items ?? null)

  watch(data, (response) => {
    if (response) {
      totalPages.value = Math.ceil(response.total / perPage)
    }
  })

  // Reset to page 1 when query changes
  watch(query, () => { page.value = 1 })

  function nextPage() {
    if (page.value < totalPages.value) page.value++
  }

  function prevPage() {
    if (page.value > 1) page.value--
  }

  return { query, page, results, totalPages, isLoading, error, nextPage, prevPage }
}

Composable ini mendemonstrasikan beberapa teknik komposisi tingkat lanjut yang patut dicermati. useDebouncedRef mengenkapsulasi logika penundaan waktu, mencegah pembebanan API yang berlebihan dengan menghindari pengiriman permintaan pada setiap ketukan tombol. computed apiUrl secara otomatis membangun ulang URL ketika query pencarian atau nomor halaman berubah, yang kemudian memicu pengambilan data baru melalui useFetchData.

Penggunaan watch pada query untuk mereset halaman ke 1 setiap kali pencarian baru dilakukan merupakan perilaku yang diharapkan oleh pengguna, namun sering terlewatkan dalam implementasi yang kurang matang. Detail semacam ini menunjukkan pentingnya mengenkapsulasi logika bisnis ke dalam composable daripada menyebarkannya ke berbagai komponen.

Komposisi composable mengikuti prinsip tanggung jawab tunggal: useDebouncedRef menangani debouncing, useFetchData mengelola siklus request/response, dan usePaginatedSearch mengorkestrasi keseluruhan alur. Arsitektur ini memudahkan pengujian unit pada setiap lapisan secara independen, sekaligus mempermudah proses debugging ketika terjadi masalah.

Dependency Injection dengan provide/inject

Untuk state yang perlu dibagikan antar komponen yang berjauhan dalam pohon komponen, sistem provide/inject dari Vue menawarkan alternatif yang elegan terhadap prop drilling. Composable dapat mengenkapsulasi mekanika ini untuk menyediakan API yang bersih dan type-safe tanpa memerlukan pustaka manajemen state eksternal.

import { provide, inject, ref, readonly, type InjectionKey, type Ref } from 'vue'

type Theme = 'light' | 'dark' | 'system'

interface ThemeContext {
  theme: Readonly<Ref<Theme>>
  setTheme: (t: Theme) => void
  resolvedTheme: Readonly<Ref<'light' | 'dark'>>
}

const ThemeKey: InjectionKey<ThemeContext> = Symbol('theme')

export function provideTheme(initial: Theme = 'system') {
  const theme = ref<Theme>(initial)

  const resolvedTheme = computed<'light' | 'dark'>(() => {
    if (theme.value !== 'system') return theme.value
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  })

  function setTheme(t: Theme) {
    theme.value = t
  }

  const context: ThemeContext = {
    theme: readonly(theme),
    setTheme,
    resolvedTheme: readonly(resolvedTheme)
  }

  provide(ThemeKey, context)
  return context
}

export function useTheme(): ThemeContext {
  const context = inject(ThemeKey)
  if (!context) {
    throw new Error('useTheme() requires a parent component to call provideTheme()')
  }
  return context
}

Penggunaan InjectionKey bertipe dengan Symbol menjamin keunikan kunci injeksi dan menyediakan inferensi tipe otomatis saat pemanggilan inject. Pola ini mengeliminasi risiko tabrakan kunci yang dahulu sering terjadi dengan kunci berbasis string pada implementasi Vue 2.

Pemisahan antara provideTheme dan useTheme menetapkan batas arsitektural yang jelas: komponen root atau layout memanggil provideTheme untuk menginisialisasi konteks, sementara komponen turunan di mana saja dalam pohon komponen memanggil useTheme untuk mengonsumsinya. Penggunaan readonly pada ref yang diekspos melindungi state dari mutasi yang tidak disengaja oleh komponen konsumer -- hanya setTheme() yang dapat memodifikasi nilai tema.

Property resolvedTheme yang bersifat computed mengilustrasikan pola yang sering dijumpai dalam composable produksi: mentransformasikan nilai konfigurasi abstrak ('system') menjadi nilai konkret ('light' atau 'dark') berdasarkan preferensi sistem pengguna. Tingkat abstraksi ini menyederhanakan logika pada komponen konsumer secara signifikan, karena setiap komponen hanya perlu berurusan dengan dua kemungkinan nilai, bukan tiga.

Composable Validasi Form yang Dapat Digunakan Ulang

Validasi form merupakan kasus penggunaan kompleks yang sangat diuntungkan oleh enkapsulasi dalam composable. Pola berikut menyediakan validasi deklaratif berbasis aturan, dengan pengelolaan error yang reaktif dan indikator validitas global yang dapat langsung digunakan untuk mengontrol status tombol submit.

import { reactive, computed, type UnwrapNestedRefs } from 'vue'

type ValidationRule<T> = (value: T) => string | true
type FieldRules<T> = { [K in keyof T]?: ValidationRule<T[K]>[] }

interface UseFormReturn<T extends Record<string, any>> {
  fields: UnwrapNestedRefs<T>
  errors: Record<keyof T, string>
  isValid: Ref<boolean>
  validate: () => boolean
  resetErrors: () => void
}

export function useFormValidation<T extends Record<string, any>>(
  initialValues: T,
  rules: FieldRules<T>
): UseFormReturn<T> {
  const fields = reactive({ ...initialValues }) as UnwrapNestedRefs<T>

  const errors = reactive(
    Object.keys(initialValues).reduce(
      (acc, key) => ({ ...acc, [key]: '' }),
      {} as Record<keyof T, string>
    )
  )

  function validate(): boolean {
    let valid = true
    for (const key of Object.keys(rules) as (keyof T)[]) {
      const fieldRules = rules[key] || []
      errors[key] = '' as any
      for (const rule of fieldRules) {
        const result = rule(fields[key])
        if (result !== true) {
          errors[key] = result as any
          valid = false
          break // Stop at first error per field
        }
      }
    }
    return valid
  }

  function resetErrors() {
    for (const key of Object.keys(errors)) {
      (errors as any)[key] = ''
    }
  }

  const isValid = computed(() =>
    Object.values(errors).every((e) => e === '')
  )

  return { fields, errors, isValid, validate, resetErrors }
}

Composable ini menggunakan reactive alih-alih ref untuk objek fields, sehingga memungkinkan akses langsung ke properti tanpa .value di dalam template. Sistem aturan mengadopsi konvensi sederhana: setiap aturan mengembalikan true jika validasi berhasil, atau pesan error berupa string jika validasi gagal. Instruksi break menghentikan proses validasi pada error pertama per field, mencegah akumulasi pesan error yang dapat membingungkan pengguna.

Tipe FieldRules<T> memanfaatkan mapped types dari TypeScript untuk memastikan bahwa aturan validasi benar-benar sesuai dengan field yang ada di form. Pendekatan ini mendeteksi kesalahan pengetikan pada saat kompilasi, sehingga mengurangi bug yang lolos ke lingkungan produksi secara signifikan.

Property computed bernama isValid menyediakan indikator reaktif tentang status keseluruhan form. Property ini dapat langsung digunakan untuk mengaktifkan atau menonaktifkan tombol submit tanpa logika tambahan di komponen -- cukup dengan binding :disabled="!isValid" pada template.

Pengujian Composable Secara Terisolasi

Composable yang menggunakan API reaktif Vue memerlukan konteks komponen aktif agar berfungsi dengan benar, karena bergantung pada sistem reaktivitas dan lifecycle hook. Teknik standar yang digunakan adalah membuat komponen wrapper minimal yang menginstansiasi composable di dalam fungsi setup(). Vitest dan Vue Test Utils menyediakan perkakas yang dibutuhkan untuk pendekatan ini.

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import { defineComponent, h } from 'vue'
import { useCounter } from './useCounter'

function withSetup<T>(composable: () => T): { result: T; unmount: () => void } {
  let result!: T
  const wrapper = mount(
    defineComponent({
      setup() {
        result = composable()
        return () => h('div')
      }
    })
  )
  return { result, unmount: () => wrapper.unmount() }
}

describe('useCounter', () => {
  it('initializes with default value', () => {
    const { result } = withSetup(() => useCounter())
    expect(result.count.value).toBe(0)
  })

  it('respects min and max boundaries', () => {
    const { result } = withSetup(() =>
      useCounter({ min: 0, max: 3, initialValue: 3 })
    )
    result.increment()
    expect(result.count.value).toBe(3) // Capped at max

    result.count.value = 0
    result.decrement()
    expect(result.count.value).toBe(0) // Capped at min
  })

  it('computes doubled value reactively', () => {
    const { result } = withSetup(() => useCounter({ initialValue: 5 }))
    expect(result.doubled.value).toBe(10)
    result.increment()
    expect(result.doubled.value).toBe(12)
  })
})

Fungsi utilitas withSetup merupakan pola yang dapat digunakan ulang untuk menguji composable apa pun dalam ekosistem Vue. Fungsi ini memasang komponen minimal yang satu-satunya tugas adalah mengeksekusi composable dalam konteks reaktif yang valid. Pengembalian metode unmount memungkinkan pengujian perilaku pembersihan dari hook onUnmounted, yang sangat penting untuk memverifikasi bahwa composable tidak meninggalkan efek samping setelah komponen dihancurkan.

Setiap pengujian di atas mencakup aspek yang berbeda: inisialisasi dengan nilai default, kepatuhan terhadap batasan yang dikonfigurasi (batas min/max), dan reaktivitas nilai computed. Cakupan ini merepresentasikan standar minimum yang diharapkan untuk composable produksi. Pengujian ketiga memiliki signifikansi khusus karena memverifikasi bahwa doubled secara otomatis diperbarui ketika count diubah melalui increment(), membuktikan bahwa graf reaktif berfungsi dengan benar.

Untuk composable asinkron seperti useFetchData, pengujian memerlukan mock fetch dan penggunaan flushPromises() dari Vue Test Utils untuk menunggu resolusi promise sebelum melakukan assertion. Topik ini merupakan pertanyaan interview klasik tentang penguasaan pengujian asinkron dengan Vue.

Pertanyaan Interview Umum tentang Vue 3 Composables

Composable Vue 3 merupakan topik yang tidak dapat dihindari dalam interview teknis sepanjang tahun 2026. Pertanyaan-pertanyaan berikut mencakup poin-poin yang dievaluasi oleh pewawancara, dari tingkat menengah hingga senior.

1. Apa perbedaan mendasar antara composable dan mixin?

Mixin pada Vue 2 menggabungkan opsi ke dalam komponen secara implisit, sehingga menyebabkan konflik nama, sumber data yang tidak jelas, dan ketiadaan pengetikan statis. Composable mengekspos antarmuka eksplisit melalui nilai kembalian yang bertipe, memungkinkan penamaan ulang melalui destructuring, dan membuat setiap dependensi transparan bagi pengembang. Dari segi maintainability, testability, dan kompatibilitas TypeScript, composable unggul secara signifikan. Setiap pemanggilan composable menghasilkan instance state yang independen, sedangkan mixin membagikan state ke seluruh komponen yang menggunakannya.

2. Mengapa composable harus dipanggil di dalam setup()?

Vue mengasosiasikan lifecycle hook (onMounted, onUnmounted, watch, watchEffect) dengan instance komponen yang aktif selama eksekusi setup(). Pemanggilan composable di luar konteks ini memutus asosiasi tersebut, sehingga efek tidak terdaftar dan tidak dibersihkan dengan benar. Hal ini merupakan salah satu pertanyaan paling sering diajukan dalam interview teknis Vue dan menguji pemahaman kandidat terhadap mekanisme internal framework.

3. Bagaimana cara berbagi state global menggunakan composable?

Terdapat dua strategi utama yang dapat digunakan. Pola singleton mendeklarasikan ref reaktif di luar fungsi composable, pada level modul, sehingga dibagikan di antara semua konsumer yang mengimpor modul tersebut. Pola provide/inject menggunakan pohon komponen untuk menyebarkan state kontekstual ke sub-pohon tertentu. Pemilihan antara keduanya bergantung pada kebutuhan: singleton untuk state yang benar-benar global, dan provide/inject untuk state yang dicakup pada sub-pohon komponen tertentu. Untuk kebutuhan manajemen state yang lebih kompleks, Pinia tetap menjadi pilihan yang direkomendasikan.

4. Apa itu MaybeRefOrGetter dan mengapa tipe ini penting?

MaybeRefOrGetter adalah tipe utilitas dari Vue yang menerima nilai mentah, Ref, atau getter function. Tipe ini memungkinkan composable menerima input statis maupun reaktif, sehingga memaksimalkan fleksibilitas bagi pemanggil. Fungsi toValue() digunakan untuk mengekstrak nilai yang mendasarinya terlepas dari tipe input yang diberikan. Pola ini menjadikan composable jauh lebih fleksibel tanpa mengorbankan type safety.

5. Bagaimana cara menguji composable yang menggunakan onMounted atau onUnmounted?

Teknik standar menggunakan fungsi helper seperti withSetup yang memasang komponen wrapper minimal. Komponen ini mengeksekusi composable di dalam setup() dan menyediakan konteks instance yang diperlukan. Untuk memverifikasi pembersihan, unmount() dipanggil kemudian dilakukan pengecekan apakah efek samping (listener, timer, AbortController) telah dihapus dengan benar. Composable yang murni reaktif tanpa lifecycle hook dapat diuji lebih sederhana menggunakan effectScope dari Vue.

6. Kapan sebaiknya menggunakan Pinia daripada composable dengan provide/inject?

Pinia lebih tepat digunakan ketika state harus dapat diakses secara global dari komponen mana pun tanpa relasi hierarkis, ketika diperlukan persistensi ke localStorage atau sessionStorage, ketika integrasi dengan Vue DevTools dibutuhkan untuk debugging, atau ketika beberapa pohon komponen harus berbagi state yang sama. Composable dengan provide/inject lebih cocok untuk state kontekstual yang dibatasi pada sub-pohon tertentu, misalnya konfigurasi tema atau pengaturan lokal pada bagian tertentu dari aplikasi.

Kesimpulan

Composable Vue 3 merepresentasikan lebih dari sekadar evolusi sintaksis dari mixin. Mekanisme ini mewujudkan perubahan paradigma dalam cara pengembang menyusun logika yang dapat digunakan ulang di aplikasi frontend modern. Penguasaan composable memberikan keunggulan kompetitif yang signifikan, baik dalam pengembangan produksi maupun dalam sesi interview teknis.

Berikut poin-poin penting yang perlu diingat:

• Pengetikan ketat: mendefinisikan interface eksplisit untuk opsi dan nilai kembalian meningkatkan keandalan kode dan pengalaman pengembang secara keseluruhan
• Pengelolaan siklus hidup: selalu membersihkan efek samping dalam onUnmounted untuk mencegah kebocoran memori dan perilaku yang tidak terduga
• Komposisi bertingkat: merancang composable khusus yang saling berkomposisi, bukan composable monolitik yang menangani segala hal sekaligus
• Reaktivitas yang fleksibel: memanfaatkan MaybeRefOrGetter, toValue, dan watchEffect untuk memaksimalkan fleksibilitas input tanpa mengorbankan keamanan tipe
• Dependency injection yang bertipe: menggunakan provide/inject dengan InjectionKey bertipe untuk state yang dibagikan dalam pohon komponen secara aman
• Testabilitas: teknik withSetup menyediakan konteks reaktif minimal untuk memvalidasi setiap composable secara independen
• Validasi deklaratif: mengenkapsulasi aturan bisnis dalam composable validasi menjamin konsistensi penerapan aturan di seluruh aplikasi

Kemampuan merancang, mengomposisi, dan menguji composable yang robust menjadi pembeda utama bagi profil senior di pasar kerja Vue pada tahun 2026. Pola-pola yang dibahas dalam artikel ini membentuk fondasi teknis yang menjadi tumpuan aplikasi Vue 3 dan Nuxt 3 di lingkungan produksi.