Frontend Academy · Pelajaran

Composables: Fungsi Komposisi Boleh Guna Semula

Ekstrak logik reaktif ke dalam fungsi composable yang diawali dengan use, kongsikannya merentas komponen, dan fahami perbezaannya daripada mixin.

Pelajaran 4 daripada 413 langkah

Composables: Fungsi Komposisi Boleh Guna Semula ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah Komposabel?

Komposabel ialah fungsi yang menggunakan cangkuk Composition API untuk merangkum dan menggunakan semula logik berkeadaan. Komposabel ialah padanan setara dengan mixin dalam Composition API — tetapi tanpa pertembungan ruang nama atau kebergantungan tersembunyi.

Komposabel Asas

Ekstrak logik reaktif ke dalam fungsi yang bermula dengan use. Fungsi itu boleh menggunakan ref, computed, watch dan cangkuk kitar hayat — sama seperti setup().

// useCounter.ts
import { ref } from 'vue';

export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => (count.value = initial);
  return { count, increment, decrement, reset };
}

// Usage in any component:
const { count, increment } = useCounter(10);

Komposabel dengan Cangkuk Kitar Hayat

Komposabel boleh mendaftarkan cangkuk kitar hayat. Cangkuk tersebut dicetuskan relatif kepada komponen yang memanggil komposabel itu.

// useOnlineStatus.ts
import { ref, onMounted, onUnmounted } from 'vue';

export function useOnlineStatus() {
  const isOnline = ref(navigator.onLine);

  const update = () => (isOnline.value = navigator.onLine);

  onMounted(() => {
    window.addEventListener('online', update);
    window.addEventListener('offline', update);
  });
  onUnmounted(() => {
    window.removeEventListener('online', update);
    window.removeEventListener('offline', update);
  });

  return { isOnline };
}

Komposabel dengan Operasi Tak Segerak (useFetch)

Komposabel sangat sesuai untuk pengambilan data tak segerak — rangkumkan corak pemuatan/ralat/data.

// useFetch.ts
export function useFetch<T>(url: MaybeRef<string>) {
  const data = ref<T | null>(null);
  const loading = ref(true);
  const error = ref<string | null>(null);

  watchEffect(async (onCleanup) => {
    const controller = new AbortController();
    onCleanup(() => controller.abort());
    loading.value = true;
    error.value = null;
    try {
      const res = await fetch(unref(url), { signal: controller.signal });
      data.value = await res.json();
    } catch (e: any) {
      if (e.name !== 'AbortError') error.value = e.message;
    } finally { loading.value = false; }
  });

  return { data, loading, error };
}

Menerima Ref sebagai Parameter

Komposabel boleh menerima sama ada nilai biasa atau ref sebagai argumen menggunakan MaybeRef<T> (= T | Ref<T>) dan unref() untuk mengakses nilainya.

import type { MaybeRef } from 'vue';
import { unref } from 'vue';

function useDouble(num: MaybeRef<number>) {
  return computed(() => unref(num) * 2);
}

Komposabel berbanding Mixin

Mixin menyuntik sifat ke dalam komponen tanpa asal yang jelas. Komposabel pula bersifat eksplisit — anda dapat melihat dengan tepat perkara yang disediakan oleh komposabel melalui nilai pemulangannya. Beberapa komposabel boleh digunakan tanpa konflik nama.

Berkongsi Keadaan antara Komponen

Jika komposabel memanggil ref() di dalam dirinya, setiap komponen yang memanggil komposabel itu mendapat keadaannya sendiri. Untuk berkongsi keadaan antara komponen, panggil ref() pada skop modul (di luar fungsi komposabel).

// Shared state (module-level):
const sharedCount = ref(0);

export function useSharedCounter() {
  // All callers share the same sharedCount
  return { count: sharedCount, increment: () => sharedCount.value++ };
}

Pustaka Komposabel

VueUse (vueuse.org) menyediakan lebih 200 komposabel sedia digunakan: useLocalStorage, useFetch, useDark, useIntersectionObserver dan banyak lagi. Sentiasa semak VueUse sebelum menulisnya dari awal.

Menguji Komposabel

Uji komposabel dengan memanggilnya di dalam komponen ujian kecil atau menggunakan corak mountedApp daripada @vue/test-utils. Vitest berintegrasi dengan baik dengan sistem kereaktifan Vue.

Konvensyen Penamaan Komposabel

Sentiasa gunakan awalan use (useAuth, useFetch, useMediaQuery). Pastikan setiap komposabel tertumpu pada satu perkara. Elakkan komposabel yang melakukan terlalu banyak perkara yang tidak berkaitan.

Organisasi Komposabel

Cipta folder composables/. Gunakan satu fail bagi setiap komposabel. Fail indeks mengeksport semula semua komposabel. Susunan ini mencerminkan cara cangkuk tersuai diorganisasikan dalam projek React.

Semakan Pantas

Apakah kelebihan utama komposabel berbanding mixin Vue?

Jawab dalam pelajaran interaktif

Rumusan: Komposabel Vue

Komposabel ialah fungsi berawalan use yang memanggil cangkuk Composition API. Setiap pemanggil mendapat keadaan bebas, melainkan anda menggunakan ref pada aras modul. Terima ref atau nilai dengan MaybeRef + unref. Daftarkan cangkuk kitar hayat di dalam komposabel. Semak VueUse sebelum menulis komposabel sendiri. Nilai pemulangan yang eksplisit mengelakkan pencemaran ruang nama seperti mixin.

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: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Composables: Fungsi Komposisi Boleh Guna Semula” percuma?

Ya — teks penuh “Composables: Fungsi Komposisi Boleh Guna Semula” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Composables: Fungsi Komposisi Boleh Guna Semula”?

Ekstrak logik reaktif ke dalam fungsi composable yang diawali dengan use, kongsikannya merentas komponen, dan fahami perbezaannya daripada mixin. Anda berlatih Frontend 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 Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend 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 4 daripada 4.

Berapa lamakah pelajaran “Composables: Fungsi Komposisi Boleh Guna Semula” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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

ref() dan reactive()
computed() dan watch()
Fungsi setup() dan script setup
Composables: Fungsi Komposisi Boleh Guna Semula

← Kembali ke Frontend Academy