สิ่งที่ทำให้ Composable มีคุณภาพ
รูปแบบการตั้งชื่อ (useName) การห่อหุ้มสถานะรีแอกทีฟ และการส่งคืนรีฟแทนค่าดิบ
สิ่งที่ทำให้ Composable มีคุณภาพ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
ฟังก์ชันประกอบคืออะไร
ฟังก์ชันประกอบ คือฟังก์ชันที่ใช้ API สำหรับการจัดองค์ประกอบของ Vue เพื่อห่อหุ้มและนำตรรกะที่มีสถานะกลับมาใช้ใหม่ เป็นแนวทางของ Vue 3 ที่มาแทนมิกซ์อิน โดยสะอาดกว่า ชัดเจนกว่า และรองรับชนิดข้อมูลได้ดีกว่า
หลักการใช้คำนำหน้า use
ตามแบบแผน คอมโพสิเบิลจะตั้งชื่อด้วยคำนำหน้า use เช่น useCounter, useFetch, useMouse วิธีนี้ทำให้ทราบได้ทันทีว่าฟังก์ชันเก็บตรรกะแบบรีแอคทีฟไว้
function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }คืนค่ารีฟ ไม่ใช่ค่าดิบ
คืนค่า รีฟ (หรือสถานะรีแอคทีฟ) เพื่อให้ผู้เรียกใช้ยังคงได้รับการตอบสนองเมื่อแยกโครงสร้างค่า หากคืนค่า count.value จะได้เพียงค่าขณะนั้นซึ่งไม่มีการอัปเดตอีกเลย
function useCounter() {
const count = ref(0);
return { count }; // return the ref itself
}การแยกโครงสร้างอย่างปลอดภัย
เนื่องจากคุณคืนค่าเป็นรีฟ ผู้เรียกใช้จึงสามารถแยกโครงสร้างค่าได้อย่างอิสระโดยไม่สูญเสียความเป็นรีแอคทีฟ รีฟแต่ละตัวจะคงการเชื่อมโยงแบบรีแอคทีฟของตัวเองไว้
const { count } = useCounter();
// count stays reactive after destructuringความรับผิดชอบเดียว
คอมโพสิเบิลที่ดีควรทำหน้าที่ หนึ่ง อย่าง useFetch ทำหน้าที่ดึงข้อมูล ส่วน useLocalStorage ทำหน้าที่เก็บข้อมูล คอมโพสิเบิลขนาดเล็กที่มุ่งเน้นหน้าที่เฉพาะจะประกอบกันเป็นฟีเจอร์ขนาดใหญ่ได้อย่างเป็นระเบียบ
การประกอบคอมโพสิเบิล
คอมโพสิเบิลสามารถเรียกใช้คอมโพสิเบิลอื่นเพื่อสร้างตรรกะเป็นชั้น ๆ ได้ เช่น useUserProfile อาจใช้ useFetch ภายใน
function useUserProfile(id) {
const { data } = useFetch("/users/" + id);
return { user: data };
}ล้างผลข้างเคียง
หากคอมโพสิเบิลเพิ่มตัวรับฟัง ตัวจับเวลา หรือการสมัครรับข้อมูล จะต้องลบสิ่งเหล่านั้นออกใน onUnmounted เพื่อป้องกันหน่วยความจำรั่ว
import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));รับอาร์กิวเมนต์แบบรีแอคทีฟ
คอมโพสิเบิลสามารถรับรีฟหรือฟังก์ชันอ่านค่าเป็นอินพุต และตอบสนองต่อค่าเหล่านั้นด้วย watch หรือ watchEffect จึงมีความยืดหยุ่น
function useDouble(source) {
return computed(() => unref(source) * 2);
}หลีกเลี่ยงความขัดแย้งของชื่อ
เมื่อคอมโพสิเบิลคืนค่าหลายรายการ ควรเปิดเผยชื่อที่ชัดเจน หากคอมโพสิเบิลสองตัวคืนค่า data เหมือนกัน ให้เปลี่ยนชื่อขณะแยกโครงสร้างเพื่อหลีกเลี่ยงชื่อซ้ำกัน
const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");ใช้ให้สอดคล้องกับแนวทางของเฟรมเวิร์ก
เรียกใช้คอมโพสิเบิลแบบ同步ที่ระดับบนสุดของ setup (หรือคอมโพสิเบิลอื่น) ไม่ใช่ภายในเงื่อนไขหรือฟังก์ชันเรียกกลับแบบอะซิงโครนัส เพื่อให้ฮุกวงจรชีวิตลงทะเบียนได้อย่างถูกต้อง
// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after awaitเอกสารและรูปแบบค่าที่ส่งคืน
คืนค่าเป็นออบเจ็กต์ที่คาดเดารูปแบบได้ เพื่อให้ผู้เรียกใช้ทราบว่าจะได้รับอะไร รูปแบบที่สม่ำเสมอ (สถานะและเมธอด) ทำให้เรียนรู้และใช้งานคอมโพสิเบิลได้ง่าย
return { count, increment, decrement, reset };ตรวจสอบความเข้าใจ
เหตุใดคอมโพสิเบิลจึงควรคืนค่าเป็นรีฟแทนค่าดิบ
สรุป
คุณได้เรียนรู้ลักษณะของคอมโพสิเบิลที่ดี ได้แก่ คำนำหน้า use การคืนค่าเป็นรีฟเพื่อให้แยกโครงสร้างได้อย่างปลอดภัย ความรับผิดชอบเดียว การล้างผลข้างเคียงใน onUnmounted และการหลีกเลี่ยงความขัดแย้งของชื่อในออบเจ็กต์ที่ส่งคืน
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 42
- บทเรียน
- 156
คำถามที่พบบ่อย
บทเรียน “สิ่งที่ทำให้ Composable มีคุณภาพ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สิ่งที่ทำให้ Composable มีคุณภาพ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สิ่งที่ทำให้ Composable มีคุณภาพ”
รูปแบบการตั้งชื่อ (useName) การห่อหุ้มสถานะรีแอกทีฟ และการส่งคืนรีฟแทนค่าดิบ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “สิ่งที่ทำให้ Composable มีคุณภาพ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สิ่งที่ทำให้ Composable มีคุณภาพ
- useCounter: คอมโพสิเบิลแบบง่าย
- useFetch: คอมโพสิเบิลสำหรับข้อมูลแบบอะซิงโครนัส
- VueUse: ไลบรารีคอมโพสิเบิล