# Hiệu năng Vue (Vue.js / Nuxt.js)

> Virtual DOM, tối ưu hóa reactivity, v-once, v-memo, lazy loading, code splitting, kích thước bundle

- 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. Virtual DOM trong Vue là gì?

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

Virtual DOM là một biểu diễn JavaScript nhẹ của cây DOM thực. Vue sử dụng Virtual DOM để giảm thiểu các thao tác DOM trực tiếp, vốn tốn kém về mặt hiệu năng. Khi trạng thái thay đổi, Vue tạo một Virtual DOM mới, so sánh nó với cái cũ (thuật toán diffing), sau đó chỉ áp dụng những thay đổi cần thiết vào DOM thực. Cách tiếp cận này giảm đáng kể số lượng thao tác DOM và cải thiện hiệu năng, đặc biệt đối với các ứng dụng phức tạp với nhiều lần cập nhật.

## 2. Sự khác biệt chính giữa ref() và shallowRef() là gì?

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

ref() tạo ra một reference reactive sâu, trong đó tất cả các thuộc tính lồng nhau cũng đều reactive, trong khi shallowRef() chỉ làm cho chính thuộc tính .value trở nên reactive. Với shallowRef(), các thay đổi sâu bên trong đối tượng không kích hoạt cập nhật. Phải thay thế toàn bộ .value để kích hoạt reactivity. shallowRef() hữu ích để tối ưu hóa hiệu năng với các cấu trúc dữ liệu lớn nơi không cần reactivity sâu, hoặc để tích hợp các hệ thống quản lý state bên ngoài.

## 3. Vai trò của directive v-once là gì?

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

Directive v-once render một phần tử và các phần tử con của nó chỉ một lần trong lần render đầu tiên, sau đó coi chúng là nội dung tĩnh cho tất cả các lần render tiếp theo. Điều này có nghĩa là ngay cả khi dữ liệu thay đổi, phần tử sẽ không bao giờ được cập nhật. Directive này hữu ích để tối ưu hóa hiệu năng cho nội dung tĩnh không bao giờ thay đổi sau lần mount ban đầu, chẳng hạn như hình ảnh banner, logo, hoặc văn bản không cần cập nhật động.

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

- Directive v-memo được giới thiệu trong Vue 3.2+ hoạt động như thế nào?
- markRaw() trong Vue có công dụng gì?

Đă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
- [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/vue-performance