Question 1

Sự khác biệt chính giữa var và let trong JavaScript là gì?

Accepted Answer

Sự khác biệt cơ bản nằm ở scope của biến. let có block scope, nghĩa là một biến khai báo bằng let chỉ tồn tại bên trong khối nơi nó được định nghĩa (giữa các dấu ngoặc nhọn). var có function scope, điều này có thể gây ra những hành vi không mong muốn vì biến có thể truy cập được bên ngoài khối. Sự khác biệt về scope này khiến let trở thành lựa chọn được khuyến nghị để tránh các lỗi liên quan đến hoisting và scope.

Question 2

Promise trong JavaScript là gì?

Accepted Answer

Promise là một đối tượng đại diện cho sự hoàn thành hoặc thất bại cuối cùng của một thao tác bất đồng bộ. Nó cho phép xử lý các thao tác tốn thời gian (yêu cầu HTTP, đọc file) mà không chặn việc thực thi mã. Một Promise có thể có ba trạng thái: pending (đang chờ), fulfilled (đã giải quyết thành công) hoặc rejected (thất bại với một lỗi).

Question 3

Vue instance là gì?

Accepted Answer

Vue instance là đối tượng được tạo ra bằng cách gọi createApp() để đại diện cho ứng dụng. Đối tượng gốc này chứa toàn bộ dữ liệu reactive, các method và các tùy chọn cấu hình. Nó đóng vai trò là điểm vào để mount ứng dụng lên một phần tử DOM và khởi tạo hệ thống reactivity của Vue.

Question 4

Component Vue là gì?

Accepted Answer

Component Vue là một Vue instance có thể tái sử dụng và có tên. Nó đóng gói HTML, CSS và JavaScript thành một đơn vị logic độc lập. Các component cho phép chia giao diện người dùng thành những phần có thể tái sử dụng và dễ bảo trì. Mỗi component có template, logic và style riêng, giúp việc tổ chức mã nguồn và tái sử dụng trở nên dễ dàng hơn.

Question 5

Cấu trúc tối thiểu cần thiết cho một ứng dụng Nuxt 3 là gì?

Accepted Answer

Một ứng dụng Nuxt 3 chỉ cần một file app.vue hoặc một thư mục pages/ ở thư mục gốc của dự án. Nếu app.vue tồn tại mà không có thư mục pages/, Nuxt tạo một ứng dụng không có Vue Router. Nếu pages/ tồn tại, Nuxt tự động kích hoạt file-based routing và cần <NuxtPage /> trong app.vue để hiển thị các route.

Question 6

Sự khác biệt chính giữa useFetch và useAsyncData trong Nuxt là gì?

Accepted Answer

useFetch là một wrapper bao quanh useAsyncData và $fetch, giúp đơn giản hóa các lệnh gọi API thông thường. Nó tự động xử lý việc xây dựng URL và nhận trực tiếp một URL làm đối số đầu tiên, trong khi useAsyncData yêu cầu một key duy nhất và một hàm fetcher tùy chỉnh. Dùng useFetch cho các lệnh gọi API đơn giản, useAsyncData cho logic fetching phức tạp.

Question 7

Server-Side Rendering (SSR) trong Nuxt là gì?

Accepted Answer

SSR tạo ra HTML hoàn chỉnh trên máy chủ với mỗi yêu cầu, rồi gửi đến client. Điều này cải thiện SEO vì các công cụ tìm kiếm nhận được nội dung HTML có thể truy cập ngay lập tức, đồng thời cải thiện thời gian đến first paint. SSR là chế độ render mặc định trong Nuxt 3, khác với render phía client nơi JavaScript tạo nội dung trong trình duyệt.

Question 8

Virtual DOM trong Vue là gì?

Accepted Answer

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.

Question 9

Mục đích chính của provide/inject trong Vue 3 là gì?

Accepted Answer

Provide/inject cho phép truyền dữ liệu từ một component cha tới bất kỳ component con cháu nào mà không cần truyền props qua từng cấp trung gian. Điều này tránh được 'props drilling', nơi props phải được truyền qua nhiều cấp component không cần đến chúng. Đặc biệt hữu ích để chia sẻ dữ liệu toàn cục như cấu hình theme hoặc trạng thái xác thực.

Question 10

Vai trò chính của defineComponent trong Vue 3 với TypeScript là gì?

Accepted Answer

defineComponent kích hoạt type inference của TypeScript cho các options của component. Nếu không có hàm này, ngữ cảnh this sẽ bị coi là any trong Options API. Nó đảm bảo props, data, computed và các method được gán kiểu chính xác một cách tự động.

Câu hỏi phỏng vấn Vue.js / Nuxt.js

Sẵn sàng cho phỏng vấn Vue.js / Nuxt.js?

Khám phá tất cả chủ đề Vue.js / Nuxt.js

Kiến thức nền tảng JavaScript

JavaScript hiện đại (ES6+)

Kiến thức cơ bản về Vue

Component Vue

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Tính reactive của Vue

Kiến thức cơ bản về Nuxt

Data Fetching trong Nuxt

SSR & SSG trong Nuxt

Server Routes Nuxt

Module Nuxt

Composables trong Vue

Form & Validation Vue

Quản lý trạng thái Nuxt

Testing trong Vue

Triển khai Nuxt & CI/CD

Hiệu năng Vue

Các mẫu nâng cao trong Vue

TypeScript với Vue

Xác thực Nuxt

SEO với Nuxt

Quốc tế hóa trong Nuxt

Kiến trúc Vue

Bảo mật Nuxt

Hệ sinh thái Vue

Di chuyển Vue 2→3 & Nuxt 2→3

Nắm vững Vue.js / Nuxt.js cho lần phỏng vấn tiếp theo