Optimalkan Vue.js dengan Composition API: Skalabilitas & Kinerja

Halo gaes! Pernah nggak sih ngerasa aplikasi Vue.js kamu mulai kerasa berat, kodenya ribet, atau makin susah di-maintain pas project-nya makin gede? Wah, itu tandanya kita kudu upgrade skill dan mindset biar aplikasi makin skalabel dan ngebut! Nah, di sini aku mau spill the beans tentang gimana Composition API di Vue 3 bisa jadi jagoan buat ngatasin semua masalah itu. Siap-siap dapet ilmu baru yang bikin kode kamu makin kiyowo dan performa makin gokil!

Kenapa Sih Kita Butuh Composition API? Emang Options API Udah Nggak Jamannya?

Oke, sebelumnya kita udah nyaman banget nih sama Options API. Semua data, methods, computed, watch, lifecycle hooks ada di 'option' masing-masing. Simpel dan mudah dipahami di awal. TAPI, coba bayangin kalo komponen kamu udah gede banget, logikanya banyak. Jadinya, satu fitur aja kodenya bisa kepisah-pisah: data-nya di data(), method-nya di methods(), terus watch-nya di watch(). Susah banget kan ngikutin alur logikanya?

Nah, di sinilah Composition API dateng jadi hero! Prinsipnya gampang banget: mengelompokkan kode berdasarkan fitur/logika, bukan berdasarkan jenis options-nya. Jadi, semua kode yang berhubungan sama satu fitur (misalnya, fitur fetch data user atau form validation) bisa kita satuin di satu tempat. Ini yang bikin kode kamu jadi lebih:

• Terorganisir (Colocation): Semua yang terkait ada di satu tempat, gampang dicari, gampang di-debug.
• Bisa Dipakai Ulang (Reusability): Logika yang udah kamu kelompokkin itu bisa dengan gampang kamu pakai lagi di komponen lain, tanpa perlu ribet copy-paste atau pake mixins yang kadang bikin bingung asal-usulnya. Ini namanya Composables, gaes!
• Skalabel: Makin gede project, makin gampang diatur dan dikembangkan.
• Performa: Dengan kode yang lebih bersih dan terstruktur, aplikasi jadi lebih mudah dioptimalkan.

Mantul, kan?

Inti dari Composition API: Si setup() dan Konco-Konconya

Oke, kita bedah nih jeroan Composition API. Semua "sihir"-nya itu berpusat di dalam fungsi setup() atau <script setup> yang lebih ringkas dan modern.

1. setup() Function (atau <script setup>)

Ini adalah pintu masuk utama Composition API. Di sini kamu bisa deklarasi state reaktif, computed properties, watchers, dan methods.

<!-- Menggunakan <script setup> yang lebih ringkas -->
<script setup>
import { ref, computed, watch, onMounted } from 'vue';

// 1. Deklarasi State Reaktif pake 'ref'
const count = ref(0); // Buat variabel reaktif dengan nilai awal 0

// 2. Computed Property
const doubleCount = computed(() => count.value * 2);

// 3. Method
const increment = () => {
  count.value++;
};

// 4. Watcher
watch(count, (newVal, oldVal) => {
  console.log(`Count berubah dari ${oldVal} jadi ${newVal}`);
});

// 5. Lifecycle Hook
onMounted(() => {
  console.log('Komponen sudah ter-mount!');
});
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Tambah</button>
  </div>
</template>

Spill dikit:

• ref(): Dipake buat bikin variabel reaktif dengan nilai primitif (string, number, boolean) atau objek. Kalo mau akses nilainya, kudu pake .value ya, ngab!
• reactive(): Buat bikin objek reaktif. Nggak perlu .value kalo ngakses propertinya. Tapi hati-hati, kalo diganti objeknya secara keseluruhan, reaktivitasnya bisa hilang. Lebih aman pake ref untuk semua.
• computed(): Buat nilai yang dihitung ulang secara otomatis kalo dependensinya berubah. Hemat performa karena cuma dihitung pas dibutuhkan.
• watch() & watchEffect(): Buat ngawasin perubahan state dan jalanin side effect tertentu.
• Lifecycle Hooks: Sekarang pake prefix on (misal: onMounted, onUpdated, onUnmounted).

2. Ngoding Lebih Rapi Pake Composables! (Ini Dia Kuncinya Skalabilitas)

Ini nih fitur yang bikin Composition API nggak kaleng-kaleng! Composables itu fungsi JavaScript biasa yang logic-nya bisa kita pisah dari komponen dan dipake ulang di mana aja. Bayangin kayak kamu bikin 'hook' sendiri di React, tapi ini di Vue.js!

Contoh Kasus: Kita mau bikin fitur toggle gelap-terang (dark mode). Daripada bikin logic-nya di setiap komponen, mending kita bikin Composables-nya!

Langkah 1: Bikin file Composables (misal: useDarkMode.js)

// src/composables/useDarkMode.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useDarkMode() {
  const isDarkMode = ref(false); // State reaktif untuk mode gelap

  const toggleDarkMode = () => {
    isDarkMode.value = !isDarkMode.value;
    document.body.classList.toggle('dark-mode', isDarkMode.value); // Contoh: nambah class ke body
  };

  const setInitialMode = () => {
    // Cek preferensi sistem atau local storage
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const storedMode = localStorage.getItem('dark-mode');

    if (storedMode !== null) {
      isDarkMode.value = storedMode === 'true';
    } else {
      isDarkMode.value = prefersDark;
    }
    document.body.classList.toggle('dark-mode', isDarkMode.value);
  };

  // Pake lifecycle hook di dalam composable!
  onMounted(() => {
    setInitialMode();
    // Simpan preferensi setiap kali berubah
    watch(isDarkMode, (newVal) => {
        localStorage.setItem('dark-mode', newVal);
    });
  });

  return {
    isDarkMode,
    toggleDarkMode
  };
}

Langkah 2: Pake Composables di Komponen Vue Kamu

<!-- src/components/MyComponent.vue -->
<script setup>
import { useDarkMode } from '@/composables/useDarkMode'; // Import composable yang udah kita buat

const { isDarkMode, toggleDarkMode } = useDarkMode(); // Pake composable-nya!

// Kamu bisa pake isDarkMode dan toggleDarkMode langsung di template atau script lainnya
</script>

<template>
  <div :class="{ 'dark-theme-active': isDarkMode }">
    <h1>Selamat Datang di Dunia {{ isDarkMode ? 'Gelap' : 'Terang' }}!</h1>
    <button @click="toggleDarkMode">
      Nyalakan {{ isDarkMode ? 'Terang' : 'Gelap' }}
    </button>
    <p>Ini adalah konten komponen lainnya.</p>
  </div>
</template>

<style>
body.dark-mode {
  background-color: #333;
  color: #eee;
}
.dark-theme-active {
  border: 1px solid v-bind(isDarkMode ? 'white' : 'black');
  padding: 10px;
}
</style>

Gimana? Keren kan? Logika dark mode kita udah rapi di satu file terpisah dan bisa dipake di mana aja! Ini bikin kode lebih bersih, gampang di-test, dan project makin skalabel!

3. provide / inject: Alternatif Global State yang Rapi

Kalo butuh share state ke banyak komponen "anak" tanpa harus oper props berkali-kali (prop drilling), provide dan inject ini jadi solusi yang oke banget. Lebih rapi daripada bikin store global yang terlalu kompleks kalo kebutuhannya cuma di beberapa bagian tree komponen.

<!-- Komponen Induk (ParentComponent.vue) -->
<script setup>
import { ref, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

const userName = ref('Budi Cahaya');

// 'provide' data ke semua komponen anak yang 'inject' key 'user-name'
provide('user-name', userName);

setTimeout(() => {
  userName.value = 'Ani Gemilang'; // Data akan reaktif di semua komponen anak!
}, 3000);
</script>

<template>
  <div>
    <h2>Komponen Induk</h2>
    <ChildComponent />
  </div>
</template>

<!-- Komponen Anak (ChildComponent.vue) -->
<script setup>
import { inject } from 'vue';

// 'inject' data dari komponen induk dengan key 'user-name'
const userName = inject('user-name');
</script>

<template>
  <div>
    <h3>Komponen Anak</h3>
    <p>Nama Pengguna dari Induk: {{ userName }}</p>
  </div>
</template>

Tips Praktis Biar Makin Jago Pake Composition API:

1. Pake <script setup>: Ini sintaks yang paling direkomendasikan karena lebih ringkas, otomatis expose variabel, dan performance-nya sedikit lebih baik.
2. ref vs reactive: Buat kesederhanaan, seringkali pake ref untuk semua (primitif atau objek) itu lebih aman dan konsisten. Ingat obj.value! reactive lebih cocok buat objek yang tidak akan diganti seluruhnya.
3. Namain Composables dengan use: Ini konvensi standar (contoh: useCounter, useMousePosition). Bikin kode lebih gampang dibaca dan dipahami.
4. Hati-hati dengan Destructuring reactive: Kalo kamu destructure objek dari reactive(), reaktivitasnya bakal hilang! Pake toRefs() atau toRef() kalo memang harus destructuring.
5. Manfaatin TypeScript: Composition API dirancang dengan sangat baik untuk TypeScript, ini ngebantu banget buat nulis kode yang lebih robust dan minim error.

Kesimpulan: Bye-bye Kode Ribet, Hello Performa Ngebut!

Gaes, Composition API ini bukan cuma sekadar fitur baru, tapi ini adalah lompatan besar buat ngembangin aplikasi Vue.js yang lebih rapi, terstruktur, mudah di-maintain, dan pastinya skalabel! Dengan Composables, kita bisa bikin logika yang bisa dipake ulang dengan gampang, bikin kode kamu jadi lebih elegant dan efisien.

Jadi, buat kamu yang pengen aplikasi Vue.js-nya makin ngebut, gampang diatur pas project-nya makin gede, dan bikin developer experience kamu makin asik, skuy langsung implementasikan Composition API ini. Dijamin, kamu bakal ngerasain vibes ngoding yang beda banget dan hasilnya bikin aplikasi kamu makin gokil! Yuk, mulai ngoding dengan Composition API sekarang juga!