Vue 3 Composition API — Kuasai Pengembangan Komponen Modern

Pengenalan: Cara Baru untuk Mengorganisir Komponen Vue

Vue 3 memperkenalkan Composition API, cara baru untuk mengorganisir dan menggunakan kembali logika komponen. Tidak seperti Options API tradisional, Composition API menyediakan organisasi yang lebih baik untuk komponen kompleks dan memudahkan ekstraksi serta penggunaan kembali logika komponen di seluruh aplikasi Kamu.

Panduan komprehensif ini mencakup semua yang perlu Kamu kuasai tentang Vue 3 Composition API.

Daftar Isi

• Apa itu Composition API?
• Setup Function
• Reactive vs Ref
• Computed Properties
• Lifecycle Hooks
• Watchers
• Custom Hooks (Composables)
• Praktik Terbaik
• Kesimpulan

Apa itu Composition API?

Composition API menyediakan serangkaian fungsi untuk menangani logika komponen, memungkinkan Kamu untuk:

• Mengorganisir kode berdasarkan fitur daripada berdasarkan tipe
• Menggunakan kembali logika dengan mudah di seluruh komponen
• Dukungan lebih baik untuk TypeScript
• Readability yang lebih baik untuk komponen kompleks

Setup Function

Fungsi setup() adalah entry point untuk Composition API. Ini adalah tempat di mana Kamu menginisialisasi semua reactive state, computed properties, dan methods yang akan digunakan dalam template.

import { ref, computed } from 'vue';

export default {
  setup() {
    // Reactive data
    const count = ref(0);
    const name = ref('John');
    
    // Computed properties
    const greeting = computed(() => {
      return `Hello, ${name.value}!`;
    });
    
    // Methods
    const increment = () => {
      count.value++;
    };
    
    return { count, name, greeting, increment };
  }
}

Reactive vs Ref

Memahami perbedaan antara reactive() dan ref() sangat penting.

Menggunakan Ref untuk Primitive Values

Fungsi ref() sangat cocok untuk membungkus nilai primitif (string, number, boolean). Kamu mengakses nilai sebenarnya melalui property .value, meskipun di template ini otomatis.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const message = ref('Hello');
    const isVisible = ref(false);
    
    const increment = () => {
      count.value++;
    };
    
    return { count, message, isVisible, increment };
  }
}

Menggunakan Reactive untuk Objects

Fungsi reactive() lebih cocok untuk object kompleks dengan property nested. Ini memberikan reactivity di semua level tanpa memerlukan akses .value.

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      name: 'John',
      nested: {
        level1: {
          level2: 'deep value'
        }
      }
    });
    
    const increment = () => {
      state.count++;
    };
    
    return { state, increment };
  }
}

Lifecycle Hooks

Lifecycle hooks memungkinkan Kamu menjalankan kode di tahap-tahap tertentu dalam lifecycle komponen. Hooks ini dijalankan pada waktu yang dapat diprediksi, dari sebelum komponen mount hingga ketika di-unmount.

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted');
    });
    
    onUnmounted(() => {
      console.log('Component unmounted');
    });
    
    return {};
  }
}

Custom Hooks (Composables)

Composables adalah fungsi JavaScript yang mengekstrak dan menggunakan kembali logika komponen. Mereka mengikuti konvensi penamaan use* dan memungkinkan Kamu mengenkapsulasi serta berbagi logika stateful di berbagai komponen.

// useCounter.js
import { ref, computed } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const doubled = computed(() => count.value * 2);
  
  return { count, increment, decrement, doubled };
}

// Usage
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, doubled } = useCounter(0);
    return { count, increment, doubled };
  }
}

Praktik Terbaik

1. Organisir berdasarkan fitur: Kelompokkan logika terkait bersama
2. Extract composables: Gunakan kembali logika di seluruh komponen
3. Gunakan TypeScript: Keamanan tipe yang lebih baik
4. Jaga setup tetap bersih: Pindahkan logika kompleks ke fungsi terpisah

Kesimpulan

Composition API adalah alat yang kuat untuk mengorganisir komponen Vue 3 dan membuat kode Kamu lebih mudah dirawat. Dengan menguasai konsep-konsep yang dibahas dalam panduan ini, Kamu akan dapat membangun aplikasi Vue yang scalable dan well-organized.