Composable คือฟังก์ชันที่นำกลับมาใช้ใหม่ได้ซึ่งห่อหุ้ม stateful logic โดยใช้ Composition API ตามธรรมชาติจะตั้งชื่อว่า useXxx และส่งคืนสถานะที่มีปฏิกิริยา บวกกับฟังก์ชัน — ช่วยให้คุณแบ่งปันตรรกะในส่วนประกอบโดยไม่มี mixins หรือการทำซ้ำ
{ ref, computed } ;
() {
count = (initial);
double = ( count. * );
() { count.++; }
() { count. = initial; }
{ count, double, increment, reset };
}
<script setup>
import { useCounter } from "@/composables/useCounter";
const { count, double, increment } = useCounter(10); // each call = independent state
</script>
<template>
<button @click="increment">{{ count }} (double: {{ double }})</button>
</template>
ส่วนประกอบแต่ละอันที่เรียก useCounter() จะได้ ของตัวเอง แยกต่างหาก count — composables สร้างสถานะใหม่สำหรับการเรียกแต่ละครั้ง ซึ่งแตกต่างจากตัวแปรระดับโมดูลที่ใช้ร่วมกัน
import { ref, onUnmounted } from "vue";
export function useMousePosition() {
const x = ref(0), y = ref(0);
const update = (e) => { x.value = e.pageX; y.value = e.pageY; };
window.addEventListener("mousemove", update); // set up
onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup!
return { x, y };
}
Composables สามารถใช้ lifecycle hooks, watchers และ composables อื่น ๆ ได้ — และที่สำคัญ พวกเขา ห่อหุ้มการทำความสะอาดของตัวเอง (onUnmounted) ดังนั้นผู้บริโภคไม่จำเป็นต้องจำไว้
Mixins (Vue 2): merged into the component — unclear where properties came from,
naming collisions between mixins, implicit dependencies
Composables: explicit imports + return values — clear sources, no collisions,
can be composed, fully typed in TypeScript
Composables คือวิธี idiomaticประเพณี ในการแยกและนำกลับมาใช้ใหม่ stateful logic ใน Vue 3 — การดึงข้อมูล การจัดการแบบฟอร์ม การติดตามเมาส์/การเลื่อน debouncing เป็นต้น
พวกเขาแก้ปัญหาการนำตรรกะกลับมาใช้ใหม่อย่างเที่ยงตรง (ชัดเจน ปราศจากการชนกัน composable TypeScript-friendly) ซึ่ง mixins ของ Vue 2 ล้มเหลว
พวกเขาเป็นเหตุผลหลักที่ทีมใช้ Composition API: ตรรกะที่ใช้ร่วมกันจะกลายเป็นฟังก์ชันที่เรียบง่าย ทดสอบได้ แทนที่จะเป็นโค้ดที่กระจัดกระจายหรือซ้ำ