Question 1

บทบาทหลักของ composable useState ใน Nuxt คืออะไร?

Accepted Answer

Composable useState สร้างสถานะแบบ reactive ที่ใช้ร่วมกันและรองรับ SSR โดยจะรับประกันว่าสถานะที่สร้างขึ้นฝั่งเซิร์ฟเวอร์จะถูก hydrate อย่างถูกต้องฝั่งไคลเอนต์ ช่วยหลีกเลี่ยงความไม่ตรงกันของ hydration ระหว่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์และไคลเอนต์ คอมโพเนนต์ทุกตัวที่ใช้ key เดียวกันจะเข้าถึงสถานะที่ใช้ร่วมกันเดียวกัน

Question 2

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

Accepted Answer

key ช่วยให้สามารถแชร์สถานะระหว่างหลายคอมโพเนนต์และรับประกันความสอดคล้องของ SSR คอมโพเนนต์ทั้งหมดที่ใช้ key เดียวกันจะเข้าถึงสถานะแบบ reactive เดียวกัน หากไม่มี key หรือใช้ key ที่เหมือนกัน สถานะจะปนกันและทำให้เกิดบั๊กที่ debug ได้ยาก

Question 3

จะกำหนดค่าเริ่มต้นของสถานะด้วย useState อย่างถูกต้องได้อย่างไร?

Accepted Answer

useState รับ key และฟังก์ชันสำหรับกำหนดค่าเริ่มต้นที่คืนค่าเริ่มต้น ฟังก์ชันนี้จะทำงานเพียงครั้งเดียวฝั่งเซิร์ฟเวอร์ จากนั้นสถานะจะถูก hydrate ฝั่งไคลเอนต์ อย่าใส่ค่าโดยตรง (useState('key', 0)) เด็ดขาด เพราะจะทำงานไม่ถูกต้องกับ SSR

การจัดการสถานะใน Nuxt

บทบาทหลักของ composable useState ใน Nuxt คืออะไร?

คำตอบ

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

คำตอบ

จะกำหนดค่าเริ่มต้นของสถานะด้วย useState อย่างถูกต้องได้อย่างไร?

คำตอบ

การ hydration แบบ SSR คืออะไรในบริบทของการจัดการสถานะใน Nuxt?

อะไรคือความแตกต่างระหว่าง useState กับ ref/reactive?

หัวข้อสัมภาษณ์ Vue.js / Nuxt.js อื่นๆ

พื้นฐาน JavaScript

JavaScript สมัยใหม่ (ES6+)

พื้นฐาน Vue

คอมโพเนนต์ Vue

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

ระบบ Reactivity ของ Vue

พื้นฐาน Nuxt

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

SSR และ SSG ใน Nuxt

Server Routes ของ Nuxt

โมดูล Nuxt

Composables ใน Vue

ฟอร์มและการตรวจสอบ Vue

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