# Composition API (Vue.js / Nuxt.js) > Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup - 24 câu hỏi phỏng vấn - Mid-Level - [Câu hỏi phỏng vấn: Vue.js / Nuxt.js](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van.md) ## 1. Composition API trong Vue 3 là gì? **Câu trả lời** Composition API là một cách mới để tổ chức logic của component Vue bằng cách dùng các composition function thay cho các options (data, methods, computed). Nó cho phép nhóm logic theo tính năng thay vì theo loại option, giúp tái sử dụng code dễ dàng hơn thông qua composable. Nó cũng hỗ trợ TypeScript tốt hơn và giúp tổ chức các component phức tạp hiệu quả hơn. ## 2. Hàm chính được sử dụng trong Composition API để định nghĩa logic của một component là gì? **Câu trả lời** Hàm setup() là điểm khởi đầu của Composition API. Nó được thực thi trước khi component được tạo, thậm chí trước cả created(). Nó nhận props và context làm tham số và phải trả về một object chứa dữ liệu cùng các hàm được phơi bày ra template. Chính trong setup() mà ta sử dụng ref, reactive, computed, watch và các lifecycle hooks của Composition API. ## 3. Sự khác biệt chính giữa ref() và reactive() là gì? **Câu trả lời** ref() tạo một tham chiếu reactive cho một giá trị primitive hoặc một object, được truy cập qua .value trong script (nhưng được tự động unwrap trong template). reactive() chỉ tạo một proxy reactive cho object và array, không cần .value nhưng sẽ mất tính reactive nếu bị destructure. ref() linh hoạt hơn cho các giá trị primitive, còn reactive() tự nhiên hơn cho các object phức tạp nhưng cần toRef/toRefs khi destructure. ## Còn 21 câu hỏi nữa - Làm thế nào để truy cập giá trị của một ref trong hàm setup()? - Làm thế nào để tạo một computed property trong Composition API? Đăng ký miễn phí: https://sharpskill.dev/vi/login ## Các chủ đề phỏng vấn Vue.js / Nuxt.js khác - [Kiến thức nền tảng JavaScript](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/javascript-fundamentals.md): 20 câu hỏi, Junior - [JavaScript hiện đại (ES6+)](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/es6-modern-javascript.md): 20 câu hỏi, Junior - [Kiến thức cơ bản về Vue](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vue-basics.md): 22 câu hỏi, Junior - [Component Vue](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vue-components.md): 20 câu hỏi, Junior - [Vue Router](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vue-router.md): 18 câu hỏi, Junior - [Pinia State Management](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/pinia-state-management.md): 20 câu hỏi, Junior - [Vuex (Legacy)](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vuex-legacy.md): 15 câu hỏi, Mid-Level - [Tính reactive của Vue](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vue-reactivity.md): 20 câu hỏi, Mid-Level - [Kiến thức cơ bản về Nuxt](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/nuxt-fundamentals.md): 22 câu hỏi, Mid-Level - [Data Fetching trong Nuxt](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/nuxt-data-fetching.md): 20 câu hỏi, Mid-Level - [SSR & SSG trong Nuxt](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/nuxt-ssr-ssg.md): 22 câu hỏi, Mid-Level - [Server Routes Nuxt](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/nuxt-server-routes.md): 20 câu hỏi, Mid-Level - [Module Nuxt](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/nuxt-modules.md): 18 câu hỏi, Mid-Level - [Composables trong Vue](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vue-composables.md): 20 câu hỏi, Mid-Level - [Form & Validation Vue](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vue-forms-validation.md): 20 câu hỏi, Mid-Level - [Quản lý trạng thái Nuxt](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/nuxt-state-management.md): 18 câu hỏi, Mid-Level - [Testing trong Vue](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vue-testing.md): 20 câu hỏi, Mid-Level - [Triển khai Nuxt & CI/CD](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/nuxt-deployment-cicd.md): 22 câu hỏi, Mid-Level - [Hiệu năng Vue](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vue-performance.md): 22 câu hỏi, Senior - [Các mẫu nâng cao trong Vue](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vue-advanced-patterns.md): 24 câu hỏi, Senior - [TypeScript với Vue](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/typescript-vue.md): 22 câu hỏi, Senior - [Xác thực Nuxt](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/nuxt-auth.md): 20 câu hỏi, Senior - [SEO với Nuxt](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/nuxt-seo.md): 20 câu hỏi, Senior - [Quốc tế hóa trong Nuxt](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/nuxt-i18n.md): 18 câu hỏi, Senior - [Kiến trúc Vue](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vue-architecture.md): 22 câu hỏi, Senior - [Bảo mật Nuxt](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/nuxt-security.md): 20 câu hỏi, Senior - [Hệ sinh thái Vue](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/vue-ecosystem.md): 18 câu hỏi, Senior - [Di chuyển Vue 2→3 & Nuxt 2→3](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/migration-vue2-vue3-nuxt2-nuxt3.md): 22 câu hỏi, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/composition-api