Phỏng vấn vị trí lập trình viên VueJS

Chào bạn, dưới đây là bộ 50 câu hỏi phỏng vấn Vue.js từ cơ bản đến nâng cao, kèm theo lời giải chi tiết và code demo để bạn có thể ôn luyện hoặc sử dụng cho mục đích tuyển dụng.

Câu 1: Vue.js là gì? Nêu các đặc điểm chính của nó.

Lời giải: Vue.js là một progressive framework dùng để xây dựng giao diện người dùng (UI). Khác với các framework nguyên khối, Vue được thiết kế để có thể áp dụng từng phần.
Đặc điểm: Virtual DOM, Component-based, Reactivity system, dễ học.
Code Demo:

HTML
<div id="app">{{ message }}</div>
<script>
  const { createApp } = Vue
  createApp({
    data() { return { message: 'Hello Vue!' } }
  }).mount('#app')
</script>

Câu 2: Directives trong Vue là gì? Kể tên một số directives phổ biến.

Lời giải: Directives là các thuộc tính đặc biệt có tiền tố v- được gắn vào thẻ HTML để thực hiện các hành động logic trên DOM.
Phổ biến: v-bind, v-model, v-if, v-for, v-on.
Code Demo:

HTML
<p v-if="seen">Bây giờ bạn thấy tôi</p>
<input v-model="message">

Câu 3: Sự khác biệt giữa `v-show` và `v-if` là gì?

Lời giải: * v-if: Render có điều kiện. Nếu sai, element sẽ bị xóa hoàn toàn khỏi DOM.
- v-show: Luôn render element nhưng ẩn/hiện bằng CSS display: none.
Code Demo:

HTML
<h1 v-if="isLoggedIn">Chào mừng!</h1>
<h1 v-show="isLoggedIn">Chào mừng!</h1>

Câu 4: `v-model` dùng để làm gì?

Lời giải: Dùng để tạo binding 2 chiều (two-way data binding) giữa form input và dữ liệu của component.
Code Demo:

HTML
<input v-model="username" placeholder="Nhập tên">
<p>Tên của bạn là: {{ username }}</p>

Câu 5: Vue Instance Lifecycle là gì? Kể tên 4 hooks quan trọng.

Lời giải: Là các giai đoạn từ khi một component được khởi tạo cho đến khi bị hủy bỏ.
Hooks: beforeCreate, created, mounted, unmounted.
Code Demo:

JavaScript
export default {
  mounted() {
    console.log('Component đã được gắn vào DOM!');
  }
}

Câu 6: Computed Properties là gì?

Lời giải: Là các thuộc tính được tính toán dựa trên dữ liệu có sẵn. Nó có cơ chế caching, chỉ tính toán lại khi dữ liệu phụ thuộc thay đổi.
Code Demo:

JavaScript
computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

Câu 7: Sự khác biệt giữa Methods và Computed?

Lời giải: Methods sẽ thực thi lại mỗi khi có render, còn Computed chỉ thực thi lại khi dependency của nó thay đổi (nhờ bộ nhớ đệm).
Code Demo:

JavaScript
// Gọi như function: {{ calculate() }}
methods: { calculate() { return Date.now() } }
// Gọi như biến: {{ status }}
computed: { status() { return this.isActive ? 'On' : 'Off' } }

Câu 8: Watchers (`watch`) dùng khi nào?

Lời giải: Dùng khi bạn cần thực hiện các tác vụ bất đồng bộ hoặc tiêu tốn thời gian (như gọi API) khi một dữ liệu cụ thể thay đổi.
Code Demo:

JavaScript
watch: {
  question(newVal, oldVal) {
    this.getAnswer();
  }
}

Câu 9: Cách truyền dữ liệu từ Cha xuống Con?

Lời giải: Sử dụng props.
Code Demo:

JavaScript
// Con: Child.vue
props: ['title']
// Cha: Parent.vue
<Child title="Chào con!" />

Câu 10: Cách truyền dữ liệu từ Con lên Cha?

Lời giải: Sử dụng $emit để gửi một sự kiện kèm dữ liệu.
Code Demo:

JavaScript
// Con
this.$emit('update', data)
// Cha
<Child @update="handleUpdate" />

Câu 11: Attribute Inheritance là gì?

Lời giải: Khi bạn truyền thuộc tính (class, style, id) vào một component mà không khai báo props, chúng sẽ tự động được thêm vào thẻ gốc (root element) của component con.
Code Demo:

HTML
<MyButton class="large-btn" />
<button></button>

Câu 12: Slot trong Vue là gì?

Lời giải: Slot cho phép cha truyền nội dung HTML vào trong component con tại các vị trí đã định sẵn.
Code Demo:

HTML
<button><slot></slot></button>
<MyButton>Click me!</MyButton>

Câu 13: Mixins là gì? Tại sao hiện nay ít dùng?

Lời giải: Mixins cho phép chia sẻ logic giữa các component. Tuy nhiên, nó gây ra vấn đề về xung đột tên và khó theo dõi nguồn gốc dữ liệu. Composition API hiện nay là giải pháp thay thế tốt hơn.
Code Demo:

JavaScript
const myMixin = { created() { console.log('Mixin hook') } }
export default { mixins: [myMixin] }

Câu 14: Dynamic Components là gì?

Lời giải: Dùng thẻ <component :is="..."> để chuyển đổi giữa các component khác nhau một cách linh hoạt.
Code Demo:

HTML
<component :is="currentTabComponent"></component>

Câu 15: `keep-alive` có tác dụng gì?

Lời giải: Dùng để bao bọc các dynamic components, giúp giữ trạng thái (state) của component không bị hủy khi chuyển đổi.
Code Demo:

HTML
<keep-alive>
  <component :is="view"></component>
</keep-alive>

Câu 16: Phân biệt `v-bind` (rút gọn `:`) và `v-on` (rút gọn `@`).

Lời giải: v-bind dùng để gắn kết dữ liệu vào thuộc tính HTML. v-on dùng để lắng nghe sự kiện.
Code Demo:

HTML
<img :src="imageSrc">
<button @click="doSomething">Click</button>

Câu 17: Scoped CSS là gì?

Lời giải: Thêm thuộc tính scoped vào thẻ <style> để đảm bảo CSS chỉ áp dụng cho component hiện tại, tránh ảnh hưởng đến các component khác.
Code Demo:

HTML
<style scoped>
.title { color: red; }
</style>

Câu 18: Teleport trong Vue 3 là gì?

Lời giải: Cho phép render một phần template của component vào một vị trí DOM khác nằm ngoài cây thư mục của component đó (ví dụ: Modal vào cuối thẻ body).
Code Demo:

HTML
<teleport to="body">
  <div class="modal">Nội dung modal</div>
</teleport>

Câu 19: Provide / Inject là gì?

Lời giải: Dùng để truyền dữ liệu từ component tổ tiên xuống các component con cháu ở mức sâu mà không cần qua các lớp trung gian (Prop Drilling).
Code Demo:

JavaScript
// Cha
provide: { user: 'Admin' }
// Cháu
inject: ['user']

Câu 20: Filters trong Vue 3 còn tồn tại không? Thay thế bằng gì?

Lời giải: Filters đã bị loại bỏ trong Vue 3. Thay vào đó, chúng ta sử dụng computed properties hoặc các hàm toàn cục.
Code Demo:

JavaScript

// Thay vì {{ price | currency }}
// Dùng: {{ formatCurrency(price) }}

Câu 21: Composition API là gì? Tại sao nên dùng?

Lời giải: Là cách tiếp cận mới trong Vue 3 giúp gom nhóm logic theo tính năng thay vì theo Options (data, methods...). Giúp tái sử dụng code tốt hơn.
Code Demo:

JavaScript
import { ref, onMounted } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}

Câu 22: Phân biệt `ref` và `reactive`.

Lời giải: * ref: Dùng cho các kiểu dữ liệu nguyên thủy (string, number) hoặc object (truy cập qua .value).
- reactive: Chỉ dùng cho object/array, không cần dùng .value.
Code Demo:

JavaScript
const count = ref(0); // count.value++
const state = reactive({ name: 'Vue' }); // state.name = 'React'

Câu 23: Virtual DOM trong Vue hoạt động như thế nào?

Lời giải: Vue tạo ra một bản sao nhẹ của DOM thật bằng JS object. Khi dữ liệu thay đổi, Vue so sánh Virtual DOM cũ và mới (diffing), sau đó chỉ cập nhật những phần thực sự thay đổi lên DOM thật.

Câu 24: `nextTick` dùng để làm gì?

Lời giải: Dùng để thực thi code ngay sau khi Vue đã hoàn thành việc cập nhật DOM dựa trên thay đổi dữ liệu.
Code Demo:

JavaScript
this.message = 'Updated';
await this.$nextTick();
// Bây giờ DOM đã cập nhật

Câu 25: Sự khác biệt giữa Options API và Composition API?

Lời giải: Options API chia code theo các khối (data, methods, computed). Composition API cho phép tổ chức code linh hoạt theo logic nghiệp vụ, dễ dàng trích xuất ra các "composables".

Câu 26: Vue Router là gì? Các chế độ (modes) của nó?

Lời giải: Thư viện điều hướng cho Vue. Có 2 chế độ chính: createWebHistory (HTML5 History API) và createWebHashHistory (dùng dấu #).

Câu 27: Navigation Guards trong Vue Router?

Lời giải: Là các hook để kiểm soát việc chuyển trang (ví dụ: kiểm tra login trước khi vào admin).
Code Demo:

JavaScript
router.beforeEach((to, from) => {
  if (to.name !== 'Login' && !isAuthenticated) return { name: 'Login' }
})

Câu 28: Vuex / Pinia là gì? Nên dùng cái nào?

Lời giải: Là các thư viện quản lý trạng thái tập trung (State Management). Pinia là thế hệ mới dành cho Vue 3, nhẹ hơn và hỗ trợ TypeScript tốt hơn Vuex.

Câu 29: Khái niệm "Reactivity" trong Vue 3 hoạt động dựa trên cái gì?

Lời giải: Dựa trên ES6 Proxy. Vue bao bọc các object bằng Proxy để lắng nghe các thao tác get/set dữ liệu.

Câu 30: Server-Side Rendering (SSR) trong Vue là gì?

Lời giải: Là quá trình render trang web trên Server thành chuỗi HTML rồi mới gửi về Browser, giúp SEO tốt hơn và tăng tốc độ hiển thị ban đầu (Nuxt.js là framework phổ biến cho việc này).

Câu 31: Tại sao phải dùng `:key` trong `v-for`?

Lời giải: Giúp Virtual DOM định danh chính xác các phần tử khi danh sách thay đổi, tối ưu hiệu năng render và tránh lỗi trạng thái component.
Code Demo:

HTML
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

Câu 32: Lazy Loading Routes là gì?

Lời giải: Chỉ tải code của trang đó khi người dùng truy cập vào trang đó, giúp giảm kích thước file bundle ban đầu.
Code Demo:

JavaScript
const User = () => import('./views/User.vue')

Câu 33: Custom Directives là gì?

Lời giải: Tự định nghĩa các directive riêng để can thiệp trực tiếp vào DOM.
Code Demo:

JavaScript
const vFocus = {
  mounted: (el) => el.focus()
}

Câu 34: Cách xử lý lỗi (Error Handling) trong Vue?

Lời giải: Sử dụng errorCaptured hook trong component hoặc app.config.errorHandler cho toàn cục.

Câu 35: Plugin trong Vue là gì?

Lời giải: Là một đoạn code thêm các tính năng toàn cục cho app (như Router, Pinia, hoặc các thư viện UI).

Câu 36: Functional Components là gì?

Lời giải: Là các component không có trạng thái (stateless) và không có instance (this), render cực nhanh. Trong Vue 3, hiệu năng của component thường đã rất tốt nên functional component ít được dùng hơn.

Câu 37: `toRef` và `toRefs` dùng khi nào?

Lời giải: Dùng để chuyển đổi các thuộc tính của một reactive object thành các ref riêng lẻ mà vẫn giữ được tính phản ứng.
Code Demo:

JavaScript
const state = reactive({ count: 0 })
const { count } = toRefs(state)

Câu 38: Sự khác biệt giữa `shallowRef` và `ref`?

Lời giải: shallowRef chỉ theo dõi thay đổi của chính biến đó (giá trị .value), không theo dõi sâu các thuộc tính bên trong object.

Câu 39: WatchEffect là gì?

Lời giải: Tự động theo dõi bất kỳ dữ liệu phản ứng nào được sử dụng bên trong callback của nó và chạy lại khi dữ liệu đó thay đổi.
Code Demo:

JavaScript

watchEffect(() => console.log(count.value))

Câu 40: Làm thế nào để giao tiếp giữa 2 component không có quan hệ cha-con?

Lời giải: Dùng Pinia (Store), Provide/Inject, hoặc Mitt (Event Bus - dù không được khuyến khích trong Vue 3).

Câu 41: Vite là gì? Tại sao Vue 3 ưu tiên dùng Vite thay vì Webpack?

Lời giải: Vite là build tool thế hệ mới, khởi động cực nhanh nhờ sử dụng Native ESM trong quá trình development.

Câu 42: Cách tích hợp thư viện bên thứ 3 (như Chart.js) vào Vue?

Lời giải: Thường khởi tạo trong mounted hook và hủy trong beforeUnmount hook để tránh rò rỉ bộ nhớ.

Câu 43: Vue 3 Fragment là gì?

Lời giải: Trong Vue 2, mỗi component phải có 1 thẻ root duy nhất. Trong Vue 3, một component có thể có nhiều thẻ root (gọi là Fragment).

Câu 44: Emits Validation trong Vue 3?

Lời giải: Cho phép khai báo và kiểm tra các sự kiện mà component con phát ra.
Code Demo:

JavaScript
emits: {
  submit: ({ email, password }) => {
    return email && password // Trả về false sẽ cảnh báo
  }
}

Câu 45: `defineProps` và `defineEmits` trong `<script setup>` là gì?

Lời giải: Là các compiler macros được dùng bên trong <script setup> để khai báo props và emits mà không cần import.

Câu 46: Một component quá lớn thì nên làm gì?

Lời giải: Tách nhỏ thành các sub-components hoặc dùng Composition API để tách logic ra các file .js (composables) riêng.

Câu 47: CSS Modules trong Vue hoạt động như thế nào?

Lời giải: Sử dụng <style module>. Các class sẽ được hash thành tên duy nhất để tránh xung đột.

Câu 48: Làm thế nào để ép buộc component render lại?

Lời giải: Thay đổi thuộc tính :key của nó hoặc dùng forceUpdate() (không khuyến khích).

Câu 49: Static Site Generation (SSG) với Vue?

Lời giải: Sử dụng VitePress hoặc Nuxt để xuất ra các file HTML tĩnh từ component Vue, cực tốt cho blog/documentation.

Câu 50: Sự khác biệt lớn nhất giữa Vue và React là gì?

Lời giải: Vue sử dụng template (dễ học, tách biệt logic/UI), React dùng JSX. Vue có hệ thống reactivity tự động cập nhật, React yêu cầu sử dụng setState hoặc hooks rõ ràng và cơ chế render lại toàn bộ cây component nếu không tối ưu.

Phản hồi từ học viên

5

Tổng 0 đánh giá