Vue Academy · Pelajaran

Mengapa Composition API?

Keterbatasan Options API, masalah penggunaan ulang logika, keunggulan Composition API.

Mengapa Composition API? adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Dua Cara Menulis Vue

Vue 3 menyediakan dua gaya untuk menulis logika komponen: API Opsi dan API Komposisi. Keduanya menghasilkan akhir yang sama, tetapi menata kode dengan cara yang sangat berbeda.

Memahami kelebihan dan kekurangannya membantu Anda memilih alat yang tepat dan membaca basis kode yang sudah ada dengan percaya diri.

Cara API Opsi Mengatur Kode

API Opsi membagi komponen menjadi beberapa bagian tetap: data, computed, methods, watch, dan kait siklus hidup. Setiap bagian dari sebuah fitur berada di bagian yang berbeda.

Untuk satu fitur kecil, Anda mungkin perlu menyentuh empat blok terpisah dalam file.

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}

Masalah: Tanggung Jawab Tersebar

Saat komponen bertambah besar, logika untuk satu tanggung jawab (misalnya kotak pencarian) tersebar di data, methods, computed, dan watch. Anda terus menggulir ke atas dan ke bawah untuk mengikuti satu fitur.

Inilah yang disebut masalah fragmentasi.

API Komposisi: Mengelompokkan Berdasarkan Fitur

API Komposisi memungkinkan Anda menempatkan semua kode untuk satu tanggung jawab logis secara bersamaan. state reaktif, nilai turunan, dan fungsi yang mengubahnya berada berdampingan.

Anda membaca dari atas ke bawah dan melihat seluruh fitur di satu tempat.

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    function increment() { count.value++ }
    return { count, doubled, increment }
  }
}

Perbandingan Berdampingan

Perhatikan bagaimana contoh kedua menyatukan count, doubled turunannya, dan increment. Dalam API Opsi, ketiga bagian yang sama berada di tiga bagian terpisah.

API Opsi: diatur berdasarkan jenis opsi
API Komposisi: diatur berdasarkan tanggung jawab logis

Menggunakan Kembali Logika: Campuran (Cara Lama)

Sebelum API Komposisi, alat utama untuk menggunakan kembali logika adalah campuran. Campuran menggabungkan opsinya ke dalam sebuah komponen.

Namun, campuran memiliki masalah nyata: konflik nama, sumber properti yang tidak jelas, dan dependensi implisit antar-campuran.

const counterMixin = {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

export default {
  mixins: [counterMixin]
  // Where did count come from? Not obvious.
}

Menggunakan Kembali Logika: Komposabel (Cara Baru)

Komposabel hanyalah fungsi yang menggunakan API reaktivitas dan mengembalikan state reaktif. Anda memanggilnya seperti fungsi apa pun, sehingga sumber setiap nilai terlihat jelas.

Tidak ada penggabungan ajaib dan tidak ada konflik nama tersembunyi.

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

Menggunakan Komposabel

Mengimpor dan memanggil komposabel memperjelas bahwa count dan increment berasal dari useCounter. Anda bahkan dapat mengganti namanya saat melakukan destrukturisasi untuk menghindari konflik.

import { useCounter } from './useCounter'

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

Mengapa Komposabel Lebih Unggul daripada Campuran

Sumber yang jelas — setiap nilai berasal dari pemanggilan fungsi yang terlihat.
Tanpa konflik nama — lakukan destrukturisasi dan ganti nama dengan bebas.
Komposabel — satu komposabel dapat memanggil komposabel lainnya.
Ramah terhadap tipe — TypeScript secara otomatis menyimpulkan tipe yang dikembalikan.

TypeScript dan Alat Pengembangan yang Lebih Baik

Karena API Komposisi dibangun dari fungsi dan variabel biasa, TypeScript dapat menyimpulkan tipe tanpa alat pengembangan khusus. Tidak ada this dengan tipe yang ditulis secara manual untuk dipelihara, dan editor memberikan pelengkapan otomatis yang akurat.

Kapan Menggunakan yang Mana

API Komposisi sangat cocok untuk komponen berukuran sedang dan besar serta logika apa pun yang ingin Anda gunakan kembali. API Opsi tetap sepenuhnya valid dan dapat dibaca dengan baik untuk komponen yang sangat kecil.

Kode Vue 3 baru umumnya mengutamakan API Komposisi, terutama dengan <script setup> yang akan segera Anda pelajari.

Uji Cepat

Uji pemahaman Anda tentang alasan API Komposisi dibuat.

Rangkuman

Dalam pelajaran ini, Anda telah mempelajari:

API Opsi mengatur kode berdasarkan jenis opsi, sehingga sebuah fitur tersebar di berbagai bagian.
API Komposisi mengelompokkan kode berdasarkan tanggung jawab logis.
Campuran menggunakan kembali logika, tetapi menyebabkan konflik nama dan sumber yang tersembunyi.
Komposabel adalah fungsi biasa yang mengembalikan state reaktif — jelas, bebas konflik, dan dapat dikomposisikan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengapa Composition API?” gratis?

Ya — teks lengkap “Mengapa Composition API?” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengapa Composition API?”?

Keterbatasan Options API, masalah penggunaan ulang logika, keunggulan Composition API. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Mengapa Composition API?” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Mengapa Composition API?
Fungsi setup() dan Variabel Reaktif
ref vs reactive: Kapan Menggunakan Masing-Masing
Computed dan Watch dalam Composition API

← Kembali ke Vue Academy