Frontend Academy · บทเรียน

Composables: ฟังก์ชัน Composition ที่นำกลับมาใช้ซ้ำได้

แยกตรรกะที่ตอบสนองออกเป็นฟังก์ชัน composable ที่ขึ้นต้นด้วย use แชร์ฟังก์ชันเหล่านี้ระหว่างคอมโพเนนต์ และทำความเข้าใจความแตกต่างจาก mixins

Composables: ฟังก์ชัน Composition ที่นำกลับมาใช้ซ้ำได้ เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คอมโพสิเบิลคืออะไร

คอมโพสิเบิลคือฟังก์ชันที่ใช้ฮุกของ Composition API เพื่อห่อหุ้มและนำตรรกะที่มีสถานะกลับมาใช้ใหม่ คอมโพสิเบิลเป็นแนวทางเทียบเท่ากับมิกซินใน Composition API แต่ไม่มีปัญหาการชนกันของชื่อในเนมสเปซหรือการพึ่งพาที่ซ่อนอยู่

คอมโพสิเบิลพื้นฐาน

แยกตรรกะแบบตอบสนองต่อการเปลี่ยนแปลงออกมาเป็นฟังก์ชันที่ขึ้นต้นด้วย use ฟังก์ชันนี้สามารถใช้ ref, computed, watch และฮุกวงจรชีวิตได้เช่นเดียวกับ 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);

คอมโพสิเบิลกับฮุกวงจรชีวิต

คอมโพสิเบิลสามารถลงทะเบียนฮุกวงจรชีวิตได้ ฮุกเหล่านี้จะทำงานโดยอ้างอิงจากคอมโพเนนต์ที่เรียกใช้คอมโพสิเบิล

// 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 };
}

คอมโพสิเบิลแบบอะซิงก์ (useFetch)

คอมโพสิเบิลเหมาะอย่างยิ่งสำหรับการดึงข้อมูลแบบอะซิงก์ โดยห่อหุ้มรูปแบบสถานะกำลังโหลด/ข้อผิดพลาด/ข้อมูลไว้ด้วยกัน

// 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 };
}

การรับ Ref เป็นพารามิเตอร์

คอมโพสิเบิลสามารถรับค่าธรรมดาหรือ ref เป็นอาร์กิวเมนต์ได้ โดยใช้ MaybeRef<T> (= T | Ref<T>) และใช้ unref() เพื่อเข้าถึงค่า

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

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

คอมโพสิเบิลเทียบกับมิกซิน

มิกซินจะแทรกพร็อพเพอร์ตีเข้าไปในคอมโพเนนต์โดยไม่ระบุแหล่งที่มาอย่างชัดเจน ส่วนคอมโพสิเบิลมีความชัดเจน — คุณจะเห็นได้ทันทีว่าคอมโพสิเบิลมอบอะไรให้จากค่าที่คืนมา และสามารถใช้คอมโพสิเบิลหลายตัวได้โดยไม่มีชื่อขัดแย้งกัน

การแชร์สถานะระหว่างคอมโพเนนต์

หากคอมโพสิเบิลเรียกใช้ ref() ภายในตัวมันเอง คอมโพเนนต์แต่ละตัวที่เรียกใช้คอมโพสิเบิลจะได้รับสถานะของตัวเอง หากต้องการแชร์สถานะระหว่างคอมโพเนนต์ ให้เรียกใช้ ref() ในขอบเขตของโมดูล ซึ่งอยู่นอกฟังก์ชันคอมโพสิเบิล

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

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

ไลบรารีคอมโพสิเบิล

VueUse (vueuse.org) มีคอมโพสิเบิลพร้อมใช้มากกว่า 200 รายการ เช่น useLocalStorage, useFetch, useDark, useIntersectionObserver และอื่น ๆ อีกมากมาย ควรตรวจสอบ VueUse ก่อนเขียนขึ้นมาใหม่ตั้งแต่ต้นเสมอ

การทดสอบคอมโพสิเบิล

ทดสอบคอมโพสิเบิลโดยเรียกใช้ภายในคอมโพเนนต์ทดสอบขนาดเล็ก หรือใช้รูปแบบ mountedApp ของ @vue/test-utils Vitest ทำงานร่วมกับระบบการตอบสนองต่อการเปลี่ยนแปลงของ Vue ได้เป็นอย่างดี

หลักการตั้งชื่อคอมโพสิเบิล

ขึ้นต้นชื่อด้วย use เสมอ เช่น useAuth, useFetch และ useMediaQuery ให้คอมโพสิเบิลแต่ละตัวมุ่งเน้นเรื่องเดียว หลีกเลี่ยงคอมโพสิเบิลที่ทำสิ่งต่าง ๆ ที่ไม่เกี่ยวข้องกันมากเกินไป

การจัดระเบียบคอมโพสิเบิล

สร้างโฟลเดอร์ composables/ โดยให้คอมโพสิเบิลแต่ละตัวอยู่ในไฟล์ของตัวเอง ไฟล์ดัชนีจะส่งออกคอมโพสิเบิลทั้งหมดอีกครั้ง แนวทางนี้คล้ายกับการจัดระเบียบฮุกแบบกำหนดเองในโปรเจกต์ React

ตรวจสอบอย่างรวดเร็ว

ข้อได้เปรียบสำคัญของคอมโพสิเบิลเหนือมิกซินของ Vue คืออะไร

สรุป: คอมโพสิเบิลของ Vue

คอมโพสิเบิลคือฟังก์ชันที่ขึ้นต้นด้วย use และเรียกใช้ฮุกของ Composition API ผู้เรียกแต่ละรายจะได้รับสถานะอิสระจากกัน เว้นแต่จะใช้ ref ระดับโมดูล รับ ref หรือค่าธรรมดาได้ด้วย MaybeRef + unref ลงทะเบียนฮุกวงจรชีวิตภายในคอมโพสิเบิล ตรวจสอบ VueUse ก่อนเขียนเอง ค่าที่คืนมาอย่างชัดเจนช่วยป้องกันมลภาวะของเนมสเปซแบบมิกซิน

คำถามที่พบบ่อย

บทเรียน “Composables: ฟังก์ชัน Composition ที่นำกลับมาใช้ซ้ำได้” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Composables: ฟังก์ชัน Composition ที่นำกลับมาใช้ซ้ำได้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Composables: ฟังก์ชัน Composition ที่นำกลับมาใช้ซ้ำได้”

แยกตรรกะที่ตอบสนองออกเป็นฟังก์ชัน composable ที่ขึ้นต้นด้วย use แชร์ฟังก์ชันเหล่านี้ระหว่างคอมโพเนนต์ และทำความเข้าใจความแตกต่างจาก mixins คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “Composables: ฟังก์ชัน Composition ที่นำกลับมาใช้ซ้ำได้” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

ref() และ reactive()
computed() และ watch()
ฟังก์ชัน setup() และ script setup
Composables: ฟังก์ชัน Composition ที่นำกลับมาใช้ซ้ำได้

← กลับไปที่ Frontend Academy