Panduan Vue 3: Cara Pakai Composition API & Script Setup

Vue 3 merevolusi cara pengembang membangun antarmuka web interaktif melalui perkenalan Composition API dan sintaks <script setup>. Pembaruan arsitektur ini mengatasi tantangan utama yang sering dihadapi pada proyek berskala besar, yaitu logika komponen yang terpencar-pencar dan sulitnya mendaur ulang kode (code reusability). Dengan pendekatan baru ini, pengembang dapat mengelompokkan logika berdasarkan fitur, bukan berdasarkan opsi bawaan framework.

Saat mengaudit basis kode aplikasi single-page application (SPA) milik klien yang masih menggunakan Vue 2 atau Options API, masalah keterbacaan kode selalu menjadi keluhan utama. Ketika sebuah komponen memiliki ratusan baris kode, melacak fungsi terkait yang terpisah di dalam blok data(), methods, dan computed memakan waktu debugging yang sangat lama.

Menguasai Composition API bukan sekadar keharusan untuk mengikuti tren teknologi, melainkan langkah krusial untuk menulis kode yang lebih modular, ramah terhadap TypeScript, dan memiliki performa eksekusi memori yang jauh lebih ringan di sisi klien (client-side).

Mengapa Harus Beralih dari Options API ke Composition API?

Pada Options API tradisional, Anda dipaksa memecah logika satu fitur ke dalam beberapa blok berbeda. Misalnya, fitur pencarian produk mengharuskan Anda mendeklarasikan kata kunci di blok data, logika pencariannya di methods, dan efek sampingnya di watch. Pola ini menyebabkan fenomena context switching yang melelahkan bagi otak saat membaca kode.

Composition API memecahkan masalah ini dengan mengizinkan Anda menyatukan semua variabel reaktif, fungsi, dan lifecycle hook yang berhubungan dengan satu fitur ke dalam satu tempat yang berdekatan. Hal ini mempermudah proses ekstraksi logika ke dalam berkas terpisah (biasa disebut Composables) yang bisa digunakan ulang di komponen lain tanpa risiko tabrakan nama seperti pada sistem Mixins lama.

Tips Praktis dari Pengalaman Saya: Mulailah biasakan memisahkan logika yang kompleks ke dalam folder /composables. Gunakan konvensi penamaan yang diawali dengan kata use, seperti useUserAuth() atau useProductSearch(). Pola ini mengadopsi standar global dari komunitas Vue dan React yang membuat kode Anda langsung dipahami oleh developer lain yang bergabung dalam tim.

Tabel Komparasi: Options API vs Composition API

Agar Anda memiliki gambaran teknis yang presisi sebelum mulai menulis kode, perhatikan perbedaan karakteristik antara kedua arsitektur penulisan komponen Vue berikut:

Keajaiban Sintaks <script setup>

Pada awal rilisnya Vue 3, pengembang harus menggunakan fungsi setup() dan secara manual mengembalikan (return) semua variabel agar bisa dibaca oleh template HTML. Pendekatan ini sering kali memicu kesalahan karena developer lupa mengekspor variabel yang dibutuhkan.

Fitur <script setup> hadir sebagai solusi mutakhir. Dengan menambahkan atribut setup pada tag script, setiap variabel atau fungsi yang Anda deklarasikan di dalamnya akan langsung terikat (bind) dan bisa digunakan di dalam template secara otomatis tanpa perlu blok return.

<!-- Contoh Implementasi Script Setup Vue 3 -->
<template>
  <div>
    <h1>Skor Saat Ini: {{ skorPemain }}</h1>
    <button @click="tambahSkor">Tambah +1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// Deklarasi variabel reaktif
const skorPemain = ref(0);

// Fungsi langsung tersedia di template
const tambahSkor = () => {
  skorPemain.value++;
};
</script>

Memahami Reaktivitas: ref() vs reactive()

Vue 3 menyediakan dua utilitas utama untuk membuat data menjadi reaktif: ref dan reactive. Perbedaan mendasar di antara keduanya sering menjadi kebingungan utama bagi developer yang baru bermigrasi.

Gunakan ref() untuk tipe data primitif seperti String, Number, dan Boolean. Saat mengubah nilainya di dalam blok script, Anda wajib menambahkan properti .value (meskipun di dalam template HTML pemanggilan .value tidak diperlukan). Sementara itu, gunakan reactive() khusus untuk struktur data kompleks seperti Object atau Array.

Kesalahan Umum yang Sering Terjadi (Troubleshooting): Berhati-hatilah saat melakukan destrukturisasi (destructuring) pada objek yang dibuat dengan reactive. Jika Anda memecah objek reaktif seperti const { nama } = penggunaReaktif;, sifat reaktivitas pada variabel nama akan hilang seketika! Jika Anda harus mendestrukturisasi, gunakan fungsi pembantu bawaan toRefs() dari Vue agar sinkronisasi data tetap terjaga.

FAQ: Pertanyaan Umum Seputar Vue 3 dan Composition API

1. Apakah Vue 3 akan menghapus Options API?

Tidak. Tim inti Vue telah menegaskan bahwa Options API akan terus didukung sebagai fitur standar. Anda bebas memilih pendekatan mana yang paling nyaman, bahkan bisa mencampur keduanya di dalam satu aplikasi (walaupun mencampurnya di dalam satu file komponen yang sama sangat tidak disarankan demi kebersihan kode).

2. Kapan sebaiknya saya tetap menggunakan Options API?

Options API masih sangat relevan jika Anda membangun proyek skala kecil atau komponen sederhana yang logikanya tidak lebih dari 50 baris kode. Struktur bawaannya yang memandu (terkotak-kotak) sangat mudah diajarkan kepada developer pemula yang baru belajar framework JavaScript.

3. Bagaimana cara mengakses "this" di dalam script setup?

Pada Composition API dan <script setup>, konteks this tidak lagi tersedia dan bernilai undefined. Anda harus mengimpor utilitas yang dibutuhkan secara langsung dari framework, seperti useRouter() untuk navigasi, atau mengoper data melalui props dan emits yang didukung secara leksikal.

4. Apakah performa Composition API lebih cepat?

Secara signifikan, ya. Komponen yang ditulis menggunakan <script setup> dikompilasi menjadi fungsi langsung tanpa membutuhkan instansiasi proxy context yang berat. Hasil kompilasinya lebih efisien, lebih mudah dikecilkan (minified) oleh bundler seperti Vite, dan mengurangi beban pemrosesan memori pada peramban pengguna.