Vue Academy · Pelajaran

Ciri Composable yang Baik

Konvensi penamaan (useName), mengenkapsulasi state reaktif, mengembalikan ref, bukan nilai mentah.

Pelajaran 1 dari 413 langkah

Ciri Composable yang Baik 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.

Apa Itu Komposabel

Komposabel adalah fungsi yang menggunakan Vue Composition API untuk merangkum dan menggunakan kembali logika yang memiliki state. Komposabel merupakan jawaban Vue 3 untuk mixin—lebih rapi, eksplisit, dan ramah terhadap tipe.

Konvensi Awalan use

Sesuai konvensi, komposabel diberi nama dengan awalan use: useCounter, useFetch, useMouse. Ini langsung menandakan bahwa fungsi tersebut menyimpan logika reaktif.

function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }

Kembalikan Ref, Bukan Nilai Mentah

Kembalikan ref (atau keadaan reaktif) agar pengguna tetap mendapatkan reaktivitas saat melakukan destrukturisasi. Mengembalikan count.value hanya memberikan cuplikan yang tidak pernah diperbarui.

function useCounter() {
  const count = ref(0);
  return { count }; // return the ref itself
}

Destrukturisasi yang Aman

Karena Anda mengembalikan ref, pengguna dapat melakukan destrukturisasi dengan bebas tanpa kehilangan reaktivitas. Setiap ref mempertahankan koneksi reaktifnya sendiri.

const { count } = useCounter();
// count stays reactive after destructuring

Tanggung Jawab Tunggal

Komposabel yang baik melakukan satu hal. useFetch mengambil data; useLocalStorage menyimpannya. Komposabel kecil yang berfokus pada satu tugas dapat digabungkan menjadi fitur yang lebih besar dengan rapi.

Menggabungkan Komposabel

Komposabel dapat memanggil komposabel lain untuk membangun logika berlapis. useUserProfile dapat menggunakan useFetch secara internal.

function useUserProfile(id) {
  const { data } = useFetch("/users/" + id);
  return { user: data };
}

Membersihkan Efek Samping

Jika komposabel menambahkan pendengar, pewaktu, atau langganan, komposabel tersebut harus menghapusnya di onUnmounted untuk mencegah kebocoran memori.

import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));

Menerima Argumen Reaktif

Komposabel dapat menerima ref atau fungsi pengambil sebagai masukan dan bereaksi terhadapnya dengan watch atau watchEffect, sehingga menjadi fleksibel.

function useDouble(source) {
  return computed(() => unref(source) * 2);
}

Hindari Konflik Penamaan

Saat komposabel mengembalikan banyak nilai, gunakan nama yang jelas. Jika dua komposabel mengembalikan data, ganti namanya saat melakukan destrukturisasi untuk menghindari benturan.

const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");

Ikuti Pola Kerangka Kerja

Panggil komposabel secara sinkron di tingkat teratas setup (atau komposabel lain), bukan di dalam kondisional atau panggilan balik asinkron, agar kait siklus hidup terdaftar dengan benar.

// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after await

Dokumentasi dan Bentuk Nilai Kembalian

Kembalikan objek yang bentuknya dapat diprediksi agar pengguna mengetahui apa yang mereka dapatkan. Bentuk yang konsisten (keadaan dan metode) membuat komposabel mudah dipelajari dan digunakan.

return { count, increment, decrement, reset };

Pemeriksaan Singkat

Mengapa komposabel sebaiknya mengembalikan ref, bukan nilai mentah?

Jawab di pelajaran interaktif

Ringkasan

Anda telah mempelajari ciri-ciri komposabel yang baik: awalan use, mengembalikan ref untuk destrukturisasi yang aman, tanggung jawab tunggal, membersihkan efek samping di onUnmounted, serta menghindari konflik penamaan pada objek yang dikembalikan.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Ciri Composable yang Baik” gratis?

Ya — teks lengkap “Ciri Composable yang Baik” 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 “Ciri Composable yang Baik”?

Konvensi penamaan (useName), mengenkapsulasi state reaktif, mengembalikan ref, bukan nilai mentah. 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 “Ciri Composable yang Baik” 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

← Kembali ke Vue Academy