# การย้าย Vue 2→3 & Nuxt 2→3 (Vue.js / Nuxt.js)

> จาก Options API ไปยัง Composition API, จาก Vuex ไปยัง Pinia, จาก asyncData/fetch ไปยัง useFetch, breaking changes, กลยุทธ์การย้าย, การเลิกใช้ nuxtServerInit

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

## 1. ความแตกต่างด้านสถาปัตยกรรมหลักระหว่าง Options API ของ Vue 2 และ Composition API ของ Vue 3 คืออะไร?

**คำตอบ**

Composition API จัดระเบียบโค้ดตามประเด็นเชิงตรรกะแทนที่จะตามประเภทของ option ทำให้สามารถจัดกลุ่มโค้ดที่เกี่ยวข้องไว้ด้วยกันได้ แนวทางนี้ช่วยเพิ่มความสามารถในการอ่านและการบำรุงรักษาของ component ที่ซับซ้อน ต่างจาก Options API ที่แยก data, methods และ computed properties ออกจากกัน นอกจากนี้ Composition API ยังช่วยให้นำตรรกะกลับมาใช้ใหม่ได้ง่ายขึ้นผ่าน composables ซึ่งเข้ามาแทนที่ mixins ที่อาจก่อให้เกิดความขัดแย้งของชื่อได้อย่างมีประสิทธิภาพ

## 2. Nuxt 3 ได้นำการเปลี่ยนแปลงสำคัญใดมาใช้เกี่ยวกับ auto-imports เมื่อเทียบกับ Nuxt 2?

**คำตอบ**

Nuxt 3 เปิดใช้ auto-imports เป็นค่าเริ่มต้นสำหรับ composables, component และยูทิลิตีของ framework ทำให้ไม่จำเป็นต้อง import ด้วยตนเอง คุณสมบัตินี้ช่วยปรับปรุงประสบการณ์ของนักพัฒนาและลดโค้ด boilerplate Nuxt 2 ต้องการ import แบบชัดเจนสำหรับฟังก์ชันส่วนใหญ่ สามารถปิดใช้คุณสมบัตินี้ในการตั้งค่าได้หากจำเป็นด้วยเหตุผลในการควบคุมแบบชัดเจน

## 3. ใน Vue 3 วิธีใดที่มาแทนที่ filters ของ Vue 2 ที่ถูกลบออกไป?

**คำตอบ**

filters ถูกลบออกใน Vue 3 เนื่องจากสร้างไวยากรณ์เฉพาะที่เข้าใจได้ยากสำหรับนักพัฒนาใหม่และส่งผลกระทบต่อประสิทธิภาพ คำแนะนำอย่างเป็นทางการคือให้ใช้ computed properties หรือ methods สำหรับการแปลงข้อมูล computed properties มีข้อได้เปรียบเรื่องการ caching อัตโนมัติสำหรับการคำนวณที่ใช้ทรัพยากรมาก ในขณะที่ methods เหมาะสำหรับการแปลงแบบง่ายที่มีพารามิเตอร์

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

- build tool เริ่มต้นใน Nuxt 3 ที่มาแทนที่ Webpack ของ Nuxt 2 คืออะไร?
- ไวยากรณ์ v-model เปลี่ยนแปลงอย่างไรระหว่าง Vue 2 และ Vue 3 สำหรับ component ที่กำหนดเอง?

สมัครฟรี: 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
- [Composition API](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/composition-api.md): 24 คำถาม, 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

---

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/migration-vue2-vue3-nuxt2-nuxt3