# ระบบ Reactivity ของ Vue (Vue.js / Nuxt.js)

> Reactivity system, reactive vs ref, toRef, toRefs, unref, shallow reactivity, readonly

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

## 1. ระบบ reactivity ของ Vue คืออะไร?

**คำตอบ**

ระบบ reactivity ของ Vue จะตรวจจับการเปลี่ยนแปลงในข้อมูลโดยอัตโนมัติและอัปเดต DOM ตามนั้น โดยอาศัย Proxy ของ JavaScript ที่ดักจับการเข้าถึงและการแก้ไขพร็อพเพอร์ตี้ ระบบนี้รับประกันว่าส่วนติดต่อผู้ใช้จะยังคงซิงโครไนซ์กับสถานะของแอปพลิเคชันโดยไม่ต้องแทรกแซงด้วยตนเอง

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

**คำตอบ**

ref() สร้าง reactive reference สำหรับค่า primitive หรือ object โดยเข้าถึงผ่าน .value ในขณะที่ reactive() สร้าง reactive proxy ของ object โดยไม่ต้องใช้ .value ในการเข้าถึงพร็อพเพอร์ตี้ ref() ใช้ได้ทั่วไป (primitive + object) และเหมาะกับค่าที่เรียบง่าย ส่วน reactive() ถูกปรับให้เหมาะกับ object แต่ใช้กับค่า primitive ไม่ได้ ในทางปฏิบัติ มักนิยมใช้ ref() เพราะทำงานได้กับทุกชนิดข้อมูล

## 3. จะเข้าถึงค่าของ ref ใน template เทียบกับใน script ได้อย่างไร?

**คำตอบ**

ใน template นั้น Vue จะ unwrap refs โดยอัตโนมัติ ทำให้เข้าถึงได้โดยตรงโดยไม่ต้องใช้ .value (เช่น {{ count }}) ส่วนใน script คุณต้องใช้ .value เพื่ออ่านหรือแก้ไขค่าของ ref (เช่น count.value++) พฤติกรรมอัตโนมัตินี้ใน template ช่วยให้เขียนโค้ดง่ายขึ้นในขณะที่ยังคงการควบคุมอย่างชัดเจนในตรรกะ JavaScript

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

- จะเกิดอะไรขึ้นหากคุณ destructure object ของ reactive()?
- toRefs() ใน 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
- [พื้นฐาน 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/vue-reactivity