Vue Academy · Pelajaran

Ciri Composable yang Baik

Konvensyen penamaan (useName), merangkum keadaan reaktif, memulangkan ref dan bukannya nilai mentah.

Pelajaran 1 daripada 413 langkah

Ciri Composable yang Baik ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah Komposabel

Komposabel ialah fungsi yang menggunakan API Komposisi Vue untuk merangkum dan menggunakan semula logik yang mempunyai keadaan. Komposabel ialah jawapan Vue 3 kepada campuran — lebih kemas, jelas dan mesra jenis.

Konvensyen Awalan use

Mengikut konvensyen, komposit dinamakan dengan awalan use: useCounter, useFetch, useMouse. Ini terus menunjukkan bahawa fungsi tersebut mengandungi logik reaktif.

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

Pulangkan Rujukan, Bukan Nilai Mentah

Pulangkan rujukan reaktif (atau keadaan reaktif) supaya pengguna kekal reaktif apabila melakukan nyahstruktur. Memulangkan count.value akan memberikan gambaran semasa yang tidak pernah dikemas kini.

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

Nyahstruktur dengan Selamat

Oleh sebab anda memulangkan rujukan reaktif, pengguna boleh melakukan nyahstruktur secara bebas tanpa kehilangan kereaktifan. Setiap rujukan mengekalkan sambungan reaktifnya sendiri.

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

Tanggungjawab Tunggal

Komposit yang baik melakukan satu perkara. useFetch mendapatkan data; useLocalStorage mengekalkannya. Komposit kecil yang berfokus boleh digabungkan menjadi ciri yang lebih besar dengan kemas.

Menggabungkan Komposit

Komposit boleh memanggil komposit lain untuk membina logik berlapis. useUserProfile mungkin menggunakan useFetch secara dalaman.

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

Membersihkan Kesan Sampingan

Jika komposit menambah pendengar, pemasa atau langganan, komposit itu mesti mengalih keluarnya dalam onUnmounted untuk mencegah kebocoran memori.

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

Terima Argumen Reaktif

Komposit boleh menerima rujukan atau fungsi pengambil nilai sebagai input dan bertindak balas terhadapnya dengan watch atau watchEffect, menjadikannya fleksibel.

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

Elakkan Konflik Penamaan

Apabila komposit memulangkan banyak nilai, gunakan nama yang jelas. Jika dua komposit memulangkan data, namakan semula nilai tersebut semasa nyahstruktur untuk mengelakkan pertindihan.

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

Kekalkan Gaya Asli Rangka Kerja

Panggil komposit secara segerak pada aras teratas setup (atau komposit lain), bukan di dalam syarat atau panggil balik tak segerak, supaya cangkuk kitar hayat didaftarkan dengan betul.

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

Dokumentasi dan Struktur Pulangan

Pulangkan objek yang boleh dijangka supaya pengguna mengetahui perkara yang diterima. Struktur yang konsisten (keadaan serta kaedah) menjadikan komposit mudah dipelajari dan digunakan.

return { count, increment, decrement, reset };

Semakan Ringkas

Mengapakah komposit patut memulangkan rujukan reaktif dan bukannya nilai mentah?

Jawab dalam pelajaran interaktif

Ringkasan

Anda telah mempelajari ciri komposit yang baik: awalan use, pemulangan rujukan reaktif untuk nyahstruktur yang selamat, tanggungjawab tunggal, pembersihan kesan sampingan dalam onUnmounted, serta pengelakan konflik penamaan pada objek yang dipulangkan.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Ciri Composable yang Baik” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Ciri Composable yang Baik”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Ciri Composable yang Baik”?

Konvensyen penamaan (useName), merangkum keadaan reaktif, memulangkan ref dan bukannya nilai mentah. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Ciri Composable yang Baik” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy