การดึงข้อมูล (Data Fetching) ใน Nuxt
useFetch, useAsyncData, $fetch, lazy fetching, error handling, refresh, data caching
1ความแตกต่างหลักระหว่าง useFetch และ useAsyncData ใน Nuxt คืออะไร?
ความแตกต่างหลักระหว่าง useFetch และ useAsyncData ใน Nuxt คืออะไร?
คำตอบ
useFetch เป็น wrapper ที่ครอบ useAsyncData และ $fetch เพื่อทำให้การเรียก API ทั่วไปง่ายขึ้น โดยจะจัดการการสร้าง URL ให้อัตโนมัติและรับ URL โดยตรงเป็นอาร์กิวเมนต์แรก ในขณะที่ useAsyncData ต้องการ key ที่ไม่ซ้ำกันและฟังก์ชัน fetcher แบบกำหนดเอง ใช้ useFetch สำหรับการเรียก API แบบง่าย และใช้ useAsyncData สำหรับลอจิกการ fetching ที่ซับซ้อน
2เหตุใดจึงแนะนำให้ระบุ key ที่ไม่ซ้ำกันเสมอเมื่อใช้ useAsyncData?
เหตุใดจึงแนะนำให้ระบุ key ที่ไม่ซ้ำกันเสมอเมื่อใช้ useAsyncData?
คำตอบ
Key ที่ไม่ซ้ำกันช่วยให้ Nuxt ระบุและกำจัด request ที่ซ้ำกันระหว่างเซิร์ฟเวอร์และไคลเอนต์ในระหว่างการ hydration แบบ SSR หากไม่มี key ที่ไม่ซ้ำกัน ข้อมูลอาจถูก re-fetch โดยไม่จำเป็นที่ฝั่งไคลเอนต์หลังจากการเรนเดอร์ของเซิร์ฟเวอร์ หรืออาจเกิดความขัดแย้งของ caching ได้ Key ยังใช้สำหรับ caching และการจัดการ state ด้วย
3อะไรคือความแตกต่างระหว่าง $fetch และ useFetch ใน Nuxt?
อะไรคือความแตกต่างระหว่าง $fetch และ useFetch ใน Nuxt?
คำตอบ
$fetch เป็นฟังก์ชันยูทิลิตีที่ทำ HTTP request แบบเรียบง่ายโดยไม่มีการจัดการ state หรือความเป็น reactive คล้ายกับ fetch ดั้งเดิมแต่มีการปรับปรุงจาก Nuxt ส่วน useFetch เป็น composable ที่คืนค่า ref แบบ reactive (data, pending, error) และจัดการ hydration แบบ SSR ใช้ $fetch สำหรับการเรียกแบบ imperative ใน event handler และใช้ useFetch สำหรับ fetching แบบ declarative ในคอมโพเนนต์
จะเปิดใช้งาน lazy fetching ด้วย useFetch หรือ useAsyncData ได้อย่างไร?
จะจัดการข้อผิดพลาดระหว่างการ data fetching ด้วย useFetch ได้อย่างไร?
+17 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ Vue.js / Nuxt.js อื่นๆ
พื้นฐาน JavaScript
JavaScript สมัยใหม่ (ES6+)
พื้นฐาน Vue
คอมโพเนนต์ Vue
Vue Router
Pinia State Management
Vuex (Legacy)
Composition API
ระบบ Reactivity ของ Vue
พื้นฐาน Nuxt
SSR และ SSG ใน Nuxt
Server Routes ของ Nuxt
โมดูล Nuxt
Composables ใน Vue
ฟอร์มและการตรวจสอบ Vue
การจัดการสถานะใน Nuxt
การทดสอบ Vue
การ Deploy Nuxt และ CI/CD
ประสิทธิภาพของ Vue
รูปแบบขั้นสูงของ Vue
TypeScript กับ Vue
การยืนยันตัวตน Nuxt
SEO ด้วย Nuxt
การทำ Internationalization ใน Nuxt
สถาปัตยกรรม Vue
ความปลอดภัยของ Nuxt
ระบบนิเวศ Vue
การย้าย Vue 2→3 & Nuxt 2→3
เชี่ยวชาญ Vue.js / Nuxt.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี