Question 1

ความแตกต่างหลักระหว่าง useFetch และ useAsyncData ใน Nuxt คืออะไร?

Accepted Answer

useFetch เป็น wrapper ที่ครอบ useAsyncData และ $fetch เพื่อทำให้การเรียก API ทั่วไปง่ายขึ้น โดยจะจัดการการสร้าง URL ให้อัตโนมัติและรับ URL โดยตรงเป็นอาร์กิวเมนต์แรก ในขณะที่ useAsyncData ต้องการ key ที่ไม่ซ้ำกันและฟังก์ชัน fetcher แบบกำหนดเอง ใช้ useFetch สำหรับการเรียก API แบบง่าย และใช้ useAsyncData สำหรับลอจิกการ fetching ที่ซับซ้อน

Question 2

เหตุใดจึงแนะนำให้ระบุ key ที่ไม่ซ้ำกันเสมอเมื่อใช้ useAsyncData?

Accepted Answer

Key ที่ไม่ซ้ำกันช่วยให้ Nuxt ระบุและกำจัด request ที่ซ้ำกันระหว่างเซิร์ฟเวอร์และไคลเอนต์ในระหว่างการ hydration แบบ SSR หากไม่มี key ที่ไม่ซ้ำกัน ข้อมูลอาจถูก re-fetch โดยไม่จำเป็นที่ฝั่งไคลเอนต์หลังจากการเรนเดอร์ของเซิร์ฟเวอร์ หรืออาจเกิดความขัดแย้งของ caching ได้ Key ยังใช้สำหรับ caching และการจัดการ state ด้วย

Question 3

อะไรคือความแตกต่างระหว่าง $fetch และ useFetch ใน Nuxt?

Accepted Answer

$fetch เป็นฟังก์ชันยูทิลิตีที่ทำ HTTP request แบบเรียบง่ายโดยไม่มีการจัดการ state หรือความเป็น reactive คล้ายกับ fetch ดั้งเดิมแต่มีการปรับปรุงจาก Nuxt ส่วน useFetch เป็น composable ที่คืนค่า ref แบบ reactive (data, pending, error) และจัดการ hydration แบบ SSR ใช้ $fetch สำหรับการเรียกแบบ imperative ใน event handler และใช้ useFetch สำหรับ fetching แบบ declarative ในคอมโพเนนต์

การดึงข้อมูล (Data Fetching) ใน Nuxt

ความแตกต่างหลักระหว่าง useFetch และ useAsyncData ใน Nuxt คืออะไร?

คำตอบ

เหตุใดจึงแนะนำให้ระบุ key ที่ไม่ซ้ำกันเสมอเมื่อใช้ useAsyncData?

คำตอบ

อะไรคือความแตกต่างระหว่าง $fetch และ useFetch ใน Nuxt?

คำตอบ

จะเปิดใช้งาน lazy fetching ด้วย useFetch หรือ useAsyncData ได้อย่างไร?

จะจัดการข้อผิดพลาดระหว่างการ data fetching ด้วย useFetch ได้อย่างไร?

หัวข้อสัมภาษณ์ 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 สำหรับการสัมภาษณ์ครั้งถัดไป