# ประสิทธิภาพของ Vue (Vue.js / Nuxt.js)

> Virtual DOM, การปรับแต่ง reactivity, v-once, v-memo, lazy loading, code splitting, ขนาด bundle

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

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

**คำตอบ**

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

## 2. ความแตกต่างหลักระหว่าง ref() และ shallowRef() คืออะไร?

**คำตอบ**

ref() สร้าง reference แบบ reactive เชิงลึกซึ่งทุก property ที่ซ้อนกันก็เป็น reactive ด้วย ในขณะที่ shallowRef() ทำให้เฉพาะ property .value เท่านั้นที่เป็น reactive เมื่อใช้ shallowRef() การเปลี่ยนแปลงเชิงลึกภายในออบเจกต์จะไม่ทริกเกอร์การอัปเดต ต้องแทนที่ .value ทั้งหมดเพื่อทริกเกอร์ reactivity shallowRef() มีประโยชน์ในการปรับแต่งประสิทธิภาพกับโครงสร้างข้อมูลขนาดใหญ่ที่ไม่จำเป็นต้องมี reactivity เชิงลึก หรือเพื่อผสานรวมระบบ state ภายนอก

## 3. ไดเรกทีฟ v-once มีบทบาทอย่างไร?

**คำตอบ**

ไดเรกทีฟ v-once จะ render element และ element ลูกของมันเพียงครั้งเดียวในระหว่างการ render ครั้งแรก จากนั้นจะปฏิบัติต่อมันเป็นเนื้อหาแบบสถิตสำหรับการ render ครั้งต่อ ๆ ไปทั้งหมด ซึ่งหมายความว่าแม้ข้อมูลจะเปลี่ยนแปลง element นั้นก็จะไม่มีวันถูกอัปเดต ไดเรกทีฟนี้มีประโยชน์ในการปรับแต่งประสิทธิภาพของเนื้อหาแบบสถิตที่ไม่เคยเปลี่ยนแปลงหลังจากการ mount ครั้งแรก เช่น รูปภาพแบนเนอร์ โลโก้ หรือข้อความที่ไม่ต้องการการอัปเดตแบบไดนามิก

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

- directive v-memo ที่ถูกนำมาใช้ใน Vue 3.2+ ทำงานอย่างไร?
- markRaw() ใน Vue มีไว้เพื่ออะไร?

สมัครฟรี: 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-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/vue-performance