Composition API
Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup
1Composition API ใน Vue 3 คืออะไร?
Composition API ใน Vue 3 คืออะไร?
คำตอบ
Composition API คือวิธีใหม่ในการจัดระเบียบ logic ของ component Vue โดยใช้ composition function แทน options (data, methods, computed) ช่วยให้สามารถจัดกลุ่ม logic ตามฟีเจอร์แทนที่จะจัดตามประเภทของ option ทำให้นำโค้ดกลับมาใช้ใหม่ได้ง่ายขึ้นผ่าน composables นอกจากนี้ยังรองรับ TypeScript ได้ดีขึ้นและจัดระเบียบ component ที่ซับซ้อนได้ดีขึ้นด้วย
2ฟังก์ชันหลักที่ใช้ใน Composition API เพื่อกำหนด logic ของ component คืออะไร?
ฟังก์ชันหลักที่ใช้ใน Composition API เพื่อกำหนด logic ของ component คืออะไร?
คำตอบ
ฟังก์ชัน setup() คือจุดเริ่มต้นของ Composition API ซึ่งจะทำงานก่อนการสร้าง component แม้กระทั่งก่อน created() ฟังก์ชันนี้รับ props และ context เป็นอาร์กิวเมนต์ และต้องคืนค่าเป็น object ที่บรรจุข้อมูลและฟังก์ชันที่จะเปิดเผยให้กับ template เราจะใช้ ref, reactive, computed, watch และ lifecycle hooks ของ Composition API ภายใน setup() นี้เอง
3ความแตกต่างหลักระหว่าง ref() กับ reactive() คืออะไร?
ความแตกต่างหลักระหว่าง ref() กับ reactive() คืออะไร?
คำตอบ
ref() สร้าง reactive reference สำหรับค่า primitive หรือ object โดยเข้าถึงผ่าน .value ใน script (แต่จะถูก unwrap อัตโนมัติใน template) ส่วน reactive() สร้าง reactive proxy สำหรับ object และ array เท่านั้น โดยไม่ต้องใช้ .value แต่จะสูญเสีย reactivity หากถูก destructure ref() ยืดหยุ่นกว่าสำหรับค่า primitive ส่วน reactive() เป็นธรรมชาติกว่าสำหรับ object ที่ซับซ้อน แต่ต้องใช้ toRef/toRefs สำหรับการ destructure
จะเข้าถึงค่าของ ref ภายในฟังก์ชัน setup() ได้อย่างไร?
จะสร้าง computed property ใน Composition API ได้อย่างไร?
+21 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ Vue.js / Nuxt.js อื่นๆ
พื้นฐาน JavaScript
JavaScript สมัยใหม่ (ES6+)
พื้นฐาน Vue
คอมโพเนนต์ Vue
Vue Router
Pinia State Management
Vuex (Legacy)
ระบบ 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 สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี