Question 1

ความแตกต่างหลักระหว่าง var และ let ใน JavaScript คืออะไร?

Accepted Answer

ความแตกต่างพื้นฐานอยู่ที่ scope ของตัวแปร let มี block scope หมายความว่าตัวแปรที่ประกาศด้วย let จะมีอยู่เฉพาะภายในบล็อกที่มันถูกกำหนด (ระหว่างวงเล็บปีกกา) ส่วน var มี function scope ซึ่งอาจทำให้เกิดพฤติกรรมที่ไม่คาดคิดเพราะตัวแปรสามารถเข้าถึงได้นอกบล็อก ความแตกต่างของ scope นี้ทำให้ let เป็นตัวเลือกที่แนะนำเพื่อหลีกเลี่ยงบั๊กที่เกี่ยวข้องกับ hoisting และ scope

Question 2

Promise ใน JavaScript คืออะไร?

Accepted Answer

Promise คือออบเจกต์ที่แทนการเสร็จสิ้นหรือความล้มเหลวในที่สุดของการดำเนินการแบบ asynchronous มันช่วยให้จัดการการดำเนินการที่ใช้เวลา (คำขอ HTTP, การอ่านไฟล์) โดยไม่บล็อกการทำงานของโค้ด Promise สามารถมีสามสถานะได้แก่ pending (กำลังรอ), fulfilled (แก้ไขสำเร็จ) หรือ rejected (ล้มเหลวพร้อมข้อผิดพลาด)

Question 3

Vue instance คืออะไร?

Accepted Answer

Vue instance คือออบเจ็กต์ที่สร้างขึ้นโดยการเรียก createApp() ซึ่งแทนตัวแอปพลิเคชัน ออบเจ็กต์รากนี้ประกอบด้วยข้อมูลแบบ reactive เมธอด และตัวเลือกการตั้งค่าทั้งหมด ทำหน้าที่เป็นจุดเริ่มต้นในการ mount แอปพลิเคชันเข้ากับองค์ประกอบ DOM และเริ่มต้นระบบ reactivity ของ Vue

Question 4

คอมโพเนนต์ Vue คืออะไร?

Accepted Answer

คอมโพเนนต์ Vue คือ Vue instance ที่นำกลับมาใช้ซ้ำได้และมีชื่อ มันห่อหุ้ม HTML, CSS และ JavaScript ไว้ในหน่วยตรรกะที่เป็นอิสระ คอมโพเนนต์ช่วยให้สามารถแบ่งส่วนติดต่อผู้ใช้ออกเป็นชิ้นส่วนที่นำกลับมาใช้ซ้ำได้และดูแลรักษาง่าย แต่ละคอมโพเนนต์มี template, ตรรกะ และสไตล์ของตัวเอง ช่วยให้การจัดระเบียบโค้ดและการนำกลับมาใช้ซ้ำทำได้ง่ายขึ้น

Question 5

โครงสร้างขั้นต่ำที่จำเป็นสำหรับแอปพลิเคชัน Nuxt 3 คืออะไร?

Accepted Answer

แอปพลิเคชัน Nuxt 3 ต้องการเพียงไฟล์ app.vue หรือไดเรกทอรี pages/ ที่ root ของโปรเจกต์ หากมี app.vue โดยไม่มีโฟลเดอร์ pages/ Nuxt จะสร้างแอปพลิเคชันที่ไม่มี Vue Router หากมี pages/ Nuxt จะเปิดใช้งาน file-based routing โดยอัตโนมัติ และต้องมี <NuxtPage /> ใน app.vue เพื่อแสดงเส้นทาง

Question 6

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

Accepted Answer

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

Question 7

Server-Side Rendering (SSR) ใน Nuxt คืออะไร?

Accepted Answer

SSR สร้าง HTML ที่สมบูรณ์บนเซิร์ฟเวอร์ในแต่ละคำขอ จากนั้นส่งไปยังไคลเอ็นต์ ซึ่งช่วยปรับปรุง SEO เนื่องจากเครื่องมือค้นหาได้รับเนื้อหา HTML ที่เข้าถึงได้ทันที และยังช่วยปรับปรุงเวลาในการแสดงผลครั้งแรก (first paint) ด้วย SSR เป็นโหมดการเรนเดอร์เริ่มต้นใน Nuxt 3 ซึ่งต่างจากการเรนเดอร์ฝั่งไคลเอ็นต์ที่ JavaScript สร้างเนื้อหาในเบราว์เซอร์

Question 8

Virtual DOM ใน Vue คืออะไร?

Accepted Answer

Virtual DOM คือการแทนที่ของ DOM tree จริงในรูปแบบ JavaScript ที่มีน้ำหนักเบา Vue ใช้ Virtual DOM เพื่อลดการจัดการ DOM โดยตรงให้น้อยที่สุด ซึ่งมีต้นทุนสูงในด้านประสิทธิภาพ เมื่อ state เปลี่ยนแปลง Vue จะสร้าง Virtual DOM ใหม่ เปรียบเทียบกับอันเก่า (อัลกอริทึม diffing) แล้วจึงนำเฉพาะการเปลี่ยนแปลงที่จำเป็นไปใช้กับ DOM จริง แนวทางนี้ช่วยลดจำนวนการดำเนินการ DOM ลงอย่างมากและปรับปรุงประสิทธิภาพ โดยเฉพาะสำหรับแอปพลิเคชันที่ซับซ้อนซึ่งมีการอัปเดตจำนวนมาก

Question 9

จุดประสงค์หลักของ provide/inject ใน Vue 3 คืออะไร?

Accepted Answer

Provide/inject ช่วยให้ส่งข้อมูลจาก component แม่ไปยัง component ลูกหลานใดก็ได้ โดยไม่ต้องส่ง props ผ่านทุกระดับชั้นกลาง ซึ่งช่วยหลีกเลี่ยง 'props drilling' ที่ต้องส่ง props ผ่านหลายระดับชั้นของ component ที่ไม่ได้ต้องการใช้ มีประโยชน์เป็นพิเศษสำหรับการแบ่งปันข้อมูลแบบ global เช่น การตั้งค่า theme หรือสถานะการยืนยันตัวตน

Question 10

บทบาทหลักของ defineComponent ใน Vue 3 ที่ใช้ TypeScript คืออะไร?

Accepted Answer

defineComponent เปิดใช้งาน type inference ของ TypeScript สำหรับ options ของ component หากไม่มีฟังก์ชันนี้ บริบท this จะถูกมองเป็น any ใน Options API ซึ่งช่วยให้ props, data, computed และเมธอดถูกกำหนดชนิดอย่างถูกต้องโดยอัตโนมัติ

คำถามสัมภาษณ์ Vue.js / Nuxt.js

พร้อมสำหรับการสัมภาษณ์ Vue.js / Nuxt.js แล้วหรือยังครับ?

สำรวจหัวข้อ 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

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