# Kiến trúc Vue (Vue.js / Nuxt.js)

> Mẫu thiết kế component, cấu trúc thư mục, module feature, domain-driven design, tổ chức composables

- 22 câu hỏi phỏng vấn
- Senior
- [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. Kiến trúc feature-first trong Vue/Nuxt là gì?

**Câu trả lời**

Kiến trúc feature-first tổ chức mã theo các tính năng nghiệp vụ thay vì theo loại kỹ thuật. Mỗi feature chứa các component, composables, store và type của nó trong một thư mục riêng. Cách tiếp cận này cải thiện khả năng bảo trì bằng cách gom mọi thứ liên quan đến một tính năng vào một chỗ, tạo thuận lợi cho làm việc nhóm vì các lập trình viên có thể làm việc trên những feature độc lập, và làm cho mã có tính module hơn bằng cách cho phép bật/tắt feature một cách dễ dàng.

## 2. Pattern Container/Presentational trong Vue là gì?

**Câu trả lời**

Pattern Container/Presentational tách các component thành hai loại: container xử lý logic nghiệp vụ, các lệnh gọi API và state, và presentational chỉ nhận props và emit sự kiện. Sự tách biệt này cải thiện khả năng tái sử dụng của component UI, tạo thuận lợi cho việc unit test các component presentational, và làm rõ trách nhiệm bằng cách cô lập logic trong container.

## 3. Sự khác biệt giữa kiến trúc layer-first và feature-first là gì?

**Câu trả lời**

Kiến trúc layer-first tổ chức mã thành các lớp kỹ thuật (components, composables, stores, utils) trong đó tất cả các component nằm cùng nhau, tất cả các composables nằm cùng nhau, v.v. Feature-first nhóm theo các tính năng nghiệp vụ trong đó mỗi feature chứa các component, composables và store riêng của nó. Layer-first đơn giản hơn cho các dự án nhỏ nhưng trở nên khó bảo trì khi dự án phát triển vì các tệp liên quan đến cùng một tính năng bị phân tán. Feature-first mở rộng tốt hơn và tạo thuận lợi cho làm việc nhóm.

## Còn 19 câu hỏi nữa

- Renderless components trong Vue là gì?
- Làm thế nào để tổ chức composables trong kiến trúc feature-first?

Đă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
- [Composition API](https://sharpskill.dev/vi/technologies/vue-nuxt/cau-hoi-phong-van/composition-api.md): 24 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
- [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/vue-architecture