# Composition API (Vue.js / Nuxt.js)

> Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup

- 24 คำถามสัมภาษณ์
- Mid-Level
- [คำถามสัมภาษณ์: Vue.js / Nuxt.js](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions.md)

## 1. 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 คืออะไร?

**คำตอบ**

ฟังก์ชัน setup() คือจุดเริ่มต้นของ Composition API ซึ่งจะทำงานก่อนการสร้าง component แม้กระทั่งก่อน created() ฟังก์ชันนี้รับ props และ context เป็นอาร์กิวเมนต์ และต้องคืนค่าเป็น object ที่บรรจุข้อมูลและฟังก์ชันที่จะเปิดเผยให้กับ template เราจะใช้ ref, reactive, computed, watch และ lifecycle hooks ของ Composition API ภายใน setup() นี้เอง

## 3. ความแตกต่างหลักระหว่าง 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

## มีอีก 21 คำถาม

- จะเข้าถึงค่าของ ref ภายในฟังก์ชัน setup() ได้อย่างไร?
- จะสร้าง computed property ใน Composition API ได้อย่างไร?

สมัครฟรี: https://sharpskill.dev/th/login

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

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/javascript-fundamentals.md): 20 คำถาม, Junior
- [JavaScript สมัยใหม่ (ES6+)](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/es6-modern-javascript.md): 20 คำถาม, Junior
- [พื้นฐาน Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-basics.md): 22 คำถาม, Junior
- [คอมโพเนนต์ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-components.md): 20 คำถาม, Junior
- [Vue Router](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-router.md): 18 คำถาม, Junior
- [Pinia State Management](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/pinia-state-management.md): 20 คำถาม, Junior
- [Vuex (Legacy)](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vuex-legacy.md): 15 คำถาม, Mid-Level
- [ระบบ Reactivity ของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-reactivity.md): 20 คำถาม, Mid-Level
- [พื้นฐาน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-fundamentals.md): 22 คำถาม, Mid-Level
- [การดึงข้อมูล (Data Fetching) ใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-data-fetching.md): 20 คำถาม, Mid-Level
- [SSR และ SSG ใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-ssr-ssg.md): 22 คำถาม, Mid-Level
- [Server Routes ของ Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-server-routes.md): 20 คำถาม, Mid-Level
- [โมดูล Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-modules.md): 18 คำถาม, Mid-Level
- [Composables ใน Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-composables.md): 20 คำถาม, Mid-Level
- [ฟอร์มและการตรวจสอบ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-forms-validation.md): 20 คำถาม, Mid-Level
- [การจัดการสถานะใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-state-management.md): 18 คำถาม, Mid-Level
- [การทดสอบ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-testing.md): 20 คำถาม, Mid-Level
- [การ Deploy Nuxt และ CI/CD](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-deployment-cicd.md): 22 คำถาม, Mid-Level
- [ประสิทธิภาพของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-performance.md): 22 คำถาม, Senior
- [รูปแบบขั้นสูงของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-advanced-patterns.md): 24 คำถาม, Senior
- [TypeScript กับ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/typescript-vue.md): 22 คำถาม, Senior
- [การยืนยันตัวตน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-auth.md): 20 คำถาม, Senior
- [SEO ด้วย Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-seo.md): 20 คำถาม, Senior
- [การทำ Internationalization ใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-i18n.md): 18 คำถาม, Senior
- [สถาปัตยกรรม Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-architecture.md): 22 คำถาม, Senior
- [ความปลอดภัยของ Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-security.md): 20 คำถาม, Senior
- [ระบบนิเวศ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-ecosystem.md): 18 คำถาม, Senior
- [การย้าย Vue 2→3 & Nuxt 2→3](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/migration-vue2-vue3-nuxt2-nuxt3.md): 22 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/composition-api