Đáp án Quiz Vue.js — 62 câu hỏi có giải thích

10 câu Cơ bản · 52 câu Trung bình

Mức Cơ bản — 10 câu Vue.js

Câu 1Core Concepts

Vue khác React ở điểm nào là cốt lõi nhất khi viết giao diện?

A.Vue chỉ chạy được với JavaScript thuần, hoàn toàn không hỗ trợ TypeScript
B.Vue hoàn toàn không dùng virtual DOM, còn React thì có
C.Vue dùng template + directive và tự theo dõi phụ thuộc; React dùng JSX
D.Vue là framework cho backend, React là thư viện frontend

Đáp án: C

Vue mô tả UI bằng template kèm directive và có hệ thống reactivity tự theo dõi phụ thuộc: sửa state là phần view liên quan tự cập nhật. React mô tả UI bằng JSX và render lại component khi state đổi, còn việc tối ưu do lập trình viên quyết định. Vue cũng đi kèm sẵn router và store chính thức (Vue Router, Pinia), trong khi React để team tự chọn.

Nguồn tham khảo

Vue — Introduction

Câu 2Core Concepts

Options API và Composition API khác nhau thế nào?

A.Composition API chạy nhanh hơn nhiều lần vì không dùng tới hệ reactivity
B.Options API tổ chức theo loại; Composition API tổ chức theo mối quan tâm
C.Options API đã bị gỡ khỏi Vue 3 nên code cũ phải viết lại
D.Composition API chỉ dùng được khi viết bằng TypeScript

Đáp án: B

Options API chia code theo loại: data, computed, methods, watch. Composition API gom theo tính năng: mọi thứ liên quan tới một mối quan tâm nằm cùng chỗ trong setup, và tách được thành composable để dùng lại. Component nhỏ thì hai cách tương đương; component lớn nhiều mối quan tâm thì Composition API tránh được việc phải nhảy qua lại giữa các khối.

Nguồn tham khảo

Vue — Composition API FAQ

Câu 3Core Concepts

`<script setup>` khác `setup()` thông thường ở điểm nào?

html

<script setup>
import { ref } from 'vue'
import UserCard from './UserCard.vue'

const count = ref(0)
</script>

<template>
  <UserCard />
  <button @click="count++">{{ count }}</button>
</template>

A.Component import vào vẫn phải khai báo thêm trong mục components
B.Cho phép bỏ hoàn toàn hệ thống reactivity — biến thường cũng tự cập nhật view
C.Các macro defineProps/defineEmits phải import từ vue trước khi dùng
D.Biến khai báo ở cấp cao nhất tự dùng được trong template, không cần return

Đáp án: D

<script setup> là đường cú pháp ở bước biên dịch cho setup(): biến ở cấp cao nhất tự dùng được trong template (không cần return), component import vào tự đăng ký, và có các macro defineProps/defineEmits/defineExpose cho kiểu chặt hơn. Reactivity không đổi — vẫn phải dùng ref/reactive để giá trị được theo dõi.

Nguồn tham khảo

Vue — script setup

Câu 4Core Concepts

Single File Component (SFC) là gì?

A.Một định dạng chạy trực tiếp trong trình duyệt mà không cần bước build
B.Một file JavaScript chứa toàn bộ component của ứng dụng
C.Một file .vue gồm ba khối <template>, <script> và <style>
D.Một cách viết chỉ dùng được với Options API của Vue 2

Đáp án: C

SFC là file .vue gom ba phần của một component: <template> (cấu trúc), <script> (logic) và <style> (giao diện). Build tool như Vite biên dịch nó thành module JavaScript. Thêm scoped vào <style> để CSS chỉ áp dụng trong component, tránh rò ra ngoài.

Nguồn tham khảo

Vue — Single-File Components

Câu 5Directives

Trong template dưới đây, mỗi directive làm gì?

html

<img :src="avatar" :alt="name">
<button @click="save">Lưu</button>
<input v-model="keyword">
<p v-if="items.length">Có {{ items.length }} mục</p>

A.v-if chỉ ẩn phần tử bằng CSS, phần tử vẫn nằm trong DOM
B.: = v-bind, @ = v-on, v-model two-way, v-if render có điều kiện
C.v-model chỉ đọc giá trị từ state ra input chứ không ghi ngược lại vào state
D.: và @ là cú pháp riêng của JSX, Vue không hỗ trợ

Đáp án: B

v-bind (rút gọn :) gán giá trị JavaScript vào attribute hoặc prop. v-on (rút gọn @) lắng nghe sự kiện. v-model là hai chiều cho input và component. v-if/v-else render có điều kiện, v-show chỉ bật tắt display. v-for lặp danh sách và cần :key.

Nguồn tham khảo

Vue — Template syntax

Câu 6Directives

Khi nào chọn `v-show` thay vì `v-if`?

A.Khi muốn phần tử biến mất hoàn toàn khỏi cây DOM
B.Khi cần dùng kèm với v-else trong cùng khối
C.Khi phần tử gần như không bao giờ hiển thị — dùng v-show để khỏi tốn tài nguyên
D.Khi phần tử bật/tắt liên tục — v-show chỉ đổi display nên chuyển rẻ

Đáp án: D

v-if thực sự tạo và huỷ phần tử cùng component con, nên chi phí nằm ở mỗi lần chuyển trạng thái; nó cũng lười — điều kiện sai từ đầu thì không render gì. v-show luôn render sẵn và chỉ bật tắt display, nên chuyển trạng thái rất rẻ nhưng tốn chi phí khởi tạo ban đầu. Bật tắt liên tục (tab, tooltip) dùng v-show; hiếm khi hiển thị hoặc nội dung nặng dùng v-if.

Nguồn tham khảo

Vue — Conditional rendering

Câu 7Component Communication

Các cách truyền dữ liệu giữa component trong Vue tương ứng với tình huống nào?

A.Cha→con props, con→cha emit, xuyên cấp provide/inject, dùng chung store
B.provide/inject dùng để gửi sự kiện từ con ngược lên cha
C.Component con có thể gán trực tiếp vào prop để cập nhật lại dữ liệu của cha
D.Mọi trường hợp đều nên dùng store toàn cục để đồng nhất

Đáp án: A

Props truyền dữ liệu từ cha xuống con và là chỉ đọc ở phía con. Emit gửi sự kiện từ con lên cha (emit("update", payload)), cha lắng nghe bằng @update. provide/inject truyền xuống nhiều cấp mà không phải chuyển tiếp từng tầng. Store (Pinia) dành cho state nhiều nhánh cùng dùng. Ngoài ra defineExpose + template ref cho phép cha gọi phương thức của con khi thật sự cần.

Nguồn tham khảo

Vue — Component events

Câu 8Vue Router

Thiết lập Vue Router cơ bản gồm những phần nào?

javascript

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/users/:id', component: UserDetail },
  ],
})

app.use(router)

A.createRouter với routes, app.use(router), <router-view>, <router-link>
B.Trong code chỉ điều hướng được bằng window.location
C.Điều hướng bằng thẻ <a href> để giữ nguyên hành vi điều hướng chuẩn của trình duyệt
D.Chỉ cần đặt file component vào thư mục pages, Vue tự sinh route

Đáp án: A

Tạo router với createRouter({ history: createWebHistory(), routes }), cài bằng app.use(router), đặt <router-view> ở nơi muốn render trang, và điều hướng bằng <router-link to="/users/1"> trong template hoặc router.push() trong code. Đọc tham số bằng useRoute().params; điều hướng bằng useRouter().

Nguồn tham khảo

Vue Router — Getting started

Câu 9Pinia

Pinia khác Vuex ở những điểm nào đáng kể?

A.Pinia chỉ lưu được dữ liệu dạng chuỗi nên phải tự serialize
B.Pinia không dùng reactivity của Vue mà tự cài lại cơ chế riêng của mình
C.Pinia bắt buộc mọi thay đổi state phải đi qua mutation đồng bộ
D.Bỏ mutation, store phẳng không lồng nhau, suy luận TypeScript tốt hơn

Đáp án: D

Pinia là thư viện state chính thức của Vue hiện nay. So với Vuex: bỏ khái niệm mutation (thay đổi state ngay trong actions), mỗi store là một đơn vị độc lập thay vì module lồng nhau, API hợp với Composition API, và TypeScript suy luận kiểu mà không cần khai báo thêm. Vẫn có devtools và hỗ trợ SSR.

Nguồn tham khảo

Pinia — Introduction

Câu 10Directives

Cần bật/tắt class CSS theo trạng thái component. Cú pháp nào của Vue phù hợp?

A.Nối chuỗi thủ công trong :class là cách duy nhất
B.Dùng document.querySelector trong onMounted để thêm class
C.:class nhận object { tên-class: điều-kiện }, hoặc mảng để gộp nhiều nguồn
D.Phải dùng v-if để render ra hai phiên bản element với class khác nhau hoàn toàn

Đáp án: C

:class="{ active: isActive, disabled: isDisabled }" — class được thêm khi giá trị tương ứng truthy. Mảng thì gộp nhiều nguồn: :class="[baseClass, { active: isActive }]". Vue tự hợp nhất với class tĩnh viết sẵn trên element.

Nguồn tham khảo

Vue docs — Reactivity fundamentals

Mức Trung bình — 52 câu Vue.js

Câu 1Directives

Vì sao `:key` trong `v-for` quan trọng, và vì sao không nên dùng chỉ số làm key?

A.Key dùng để Vue sắp xếp danh sách theo thứ tự tăng dần
B.Key chỉ để tránh cảnh báo trong console, không ảnh hưởng hành vi
C.Dùng chỉ số luôn tốt hơn vì nó luôn là số nguyên duy nhất trong toàn bộ danh sách
D.Key là danh tính của item; chỉ số bị dịch khi chèn/xoá nên Vue tái dùng sai node

Đáp án: D

:key cho Vue một danh tính ổn định để so khớp node cũ với item mới, nhờ đó chỉ thêm/xoá/di chuyển đúng phần cần thiết. Dùng chỉ số làm key thì khi chèn hoặc xoá ở giữa, danh tính của các item phía sau bị dịch một bậc: Vue giữ lại node cũ cho item mới, khiến state cục bộ (giá trị input, checkbox, trạng thái mở/đóng) dính sang item khác. Dùng id ổn định từ dữ liệu.

Nguồn tham khảo

Vue — List rendering: maintaining state with key

Câu 2Directives

`v-model` trên một component tự viết được biên dịch thành gì?

html

<!-- cha viết -->
<MyInput v-model="keyword" />

<!-- tương đương -->
<MyInput :model-value="keyword" @update:model-value="keyword = $event" />

A.Một prop modelValue truyền xuống cộng sự kiện update:modelValue phát lên
B.Một tham chiếu chung khiến cha và con cùng trỏ tới một biến, sửa bên nào cũng đổi
C.Một lời gọi trực tiếp tới document.querySelector để đọc giá trị input
D.Một store toàn cục ngầm do Vue tạo ra cho mỗi component

Đáp án: A

v-model trên component là đường cú pháp cho prop modelValue và sự kiện update:modelValue. Con nhận giá trị qua prop và gọi emit("update:modelValue", giá trị mới) khi muốn đổi. Nhiều v-model trên cùng component thì đặt tên: v-model:title ứng với prop title và sự kiện update:title. Vue 3.4 trở đi có macro defineModel() viết gọn hơn.

Nguồn tham khảo

Vue — Component v-model

Câu 3Reactivity

Hệ thống reactivity của Vue 3 hoạt động dựa trên cơ chế nào?

A.So sánh sâu toàn bộ state sau mỗi sự kiện để tìm ra những chỗ vừa thay đổi
B.Object.defineProperty cho từng thuộc tính, giống hệt Vue 2
C.Proxy bao quanh object: đọc thì track phụ thuộc, ghi thì trigger effect
D.Polling định kỳ để kiểm tra giá trị có đổi hay không

Đáp án: C

Vue 3 bọc object bằng Proxy. Khi một effect (hàm render, computed, watchEffect) đọc thuộc tính, Vue ghi lại quan hệ phụ thuộc; khi thuộc tính bị ghi, Vue chạy lại đúng các effect phụ thuộc. So với Object.defineProperty của Vue 2, Proxy bắt được cả việc thêm/xoá thuộc tính và thao tác mảng theo chỉ số, nên không cần Vue.set nữa.

Nguồn tham khảo

Vue — Reactivity in depth

Câu 4Reactivity

Phát biểu nào sau đây SAI về `ref` và `reactive`?

javascript

const count = ref(0)
count.value++

const state = reactive({ user: { name: 'An' } })
const { user } = state       // vẫn reactive (object)
const { name } = state.user  // MẤT reactivity (primitive)

A.Trong template thì vẫn phải viết .value mỗi khi đọc giá trị của một ref
B.Destructure object reactive lấy primitive sẽ mất reactive, trừ khi dùng toRefs
C.reactive chỉ nhận object/array/Map/Set, không dùng được cho số hay chuỗi
D.ref dùng được cho cả primitive lẫn object, truy cập qua .value trong script

Đáp án: A

ref bọc mọi loại giá trị và truy cập bằng .value trong script (template tự bóc ở cấp cao nhất). reactive chỉ nhận object và trả về proxy sâu, không cần .value. Điểm dễ vấp: gán lại toàn bộ một object reactive (state = {...}) làm mất kết nối, và destructuring trường primitive cũng mất reactivity — dùng toRefs() khi cần tách.

Nguồn tham khảo

Vue — Reactivity fundamentals

Câu 5Reactivity

`computed`, `watch` và `watchEffect` nên dùng trong tình huống nào?

A.computed và watch giống hệt nhau, chọn cái nào cũng được
B.watchEffect chỉ chạy một lần khi component mount chứ không bao giờ chạy lại nữa
C.computed cho giá trị dẫn xuất, watch theo nguồn cụ thể, watchEffect tự dò
D.Nên đặt lời gọi API trong computed để tự cache kết quả

Đáp án: C

computed khai báo giá trị dẫn xuất: có cache, chỉ tính lại khi phụ thuộc đổi, phải thuần và đồng bộ. watch theo dõi một nguồn cụ thể để chạy tác dụng phụ, cho cả giá trị cũ và mới, mặc định không chạy ngay (bật bằng immediate: true). watchEffect chạy ngay và tự theo dõi mọi thứ đọc bên trong — gọn khi phụ thuộc nhiều nhưng khó thấy rõ nguồn kích hoạt.

Nguồn tham khảo

Vue — Watchers

Câu 6Composition API

Composable là gì và hơn mixin ở điểm nào?

javascript

export function useCounter(initial = 0) {
  const count = ref(initial)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
}

A.Hàm đóng gói logic có state; nguồn gốc mỗi biến rõ ràng tại chỗ gọi
B.Composable là một component không có phần template
C.Mixin an toàn hơn vì Vue tự cảnh báo mỗi khi có trùng tên thuộc tính
D.Composable chỉ chứa được hàm thuần, không giữ được state

Đáp án: A

Composable là hàm dùng Composition API để gói một mảng logic có state (useCounter, useFetch, useLocalStorage) và trả về những gì component cần. Khác mixin: mọi thứ đến từ chỗ gọi tường minh (const { count } = useCounter()), đổi tên được khi trùng, nhận tham số, và gọi nhiều lần cho nhiều instance độc lập.

Nguồn tham khảo

Vue — Composables

Câu 7Composition API

Trong Composition API, `created` và `beforeCreate` tương ứng với cái gì?

A.Không có gì tương ứng; phải quay lại Options API nếu cần chạy code lúc khởi tạo component
B.onMounted — vì mount xảy ra ngay sau created
C.Chính phần thân của setup, chạy ở thời điểm tương đương nên không có hook riêng
D.onCreated và onBeforeCreate — chỉ đổi tên có tiền tố on

Đáp án: C

Thân hàm setup chạy đúng ở giai đoạn của beforeCreate/created, nên hai hook đó không có bản on*. Các hook khác thêm tiền tố on: onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, cùng onErrorCaptured. Chúng phải được gọi đồng bộ ở cấp cao nhất của setup để Vue biết gắn vào component nào.

Nguồn tham khảo

Vue — Lifecycle hooks

Câu 8Composition API

`provide` / `inject` dùng khi nào và cần lưu ý gì để giá trị vẫn reactive?

javascript

// component cha
const theme = ref('dark')
provide('theme', theme)          // truyền cả ref

// component cháu
const theme = inject('theme')     // theme.value phản ánh thay đổi từ cha

A.Dùng để gửi sự kiện từ con lên cha thay cho việc emit
B.Truyền xuống nhiều cấp; provide chính ref/reactive chứ không phải .value
C.Giá trị inject luôn giữ được tính reactive kể cả khi provide một số nguyên thường
D.Chỉ dùng được giữa cha và con trực tiếp, không xuyên nhiều cấp

Đáp án: B

provide/inject giải quyết việc truyền dữ liệu xuống sâu mà không phải chuyển tiếp props qua từng tầng — hợp với theme, cấu hình, hoặc API nội bộ của một component phức hợp. Muốn bên nhận thấy thay đổi thì provide nguyên ref/reactive, không provide .value. Nên đặt hàm cập nhật cùng chỗ và chỉ cho con gọi hàm đó, thay vì cho con ghi thẳng.

Nguồn tham khảo

Vue — Provide / Inject

Câu 9Composition API

`defineProps` và `defineEmits` trong `<script setup>` có gì đặc biệt?

typescript

const props = defineProps<{ id: string; compact?: boolean }>()
const emit = defineEmits<{ (e: 'select', id: string): void }>()

function pick() {
  emit('select', props.id)
}

A.Là macro xử lý lúc biên dịch — không cần import, khai báo được bằng kiểu TypeScript
B.defineProps trả về object có thể gán lại để cập nhật giá trị prop
C.Phải khai báo cả hai kể cả khi component không nhận prop nào và cũng không phát sự kiện nào
D.Chúng là hàm runtime import từ vue, gọi được ở bất kỳ đâu trong file

Đáp án: A

defineProps/defineEmits là macro của compiler: không import, chỉ dùng ở cấp cao nhất của <script setup>, và được biến thành khai báo props/emits thật lúc build. Khai báo bằng kiểu TypeScript cho suy luận chặt cả chiều nhận (props) lẫn chiều phát (payload sự kiện). Props luôn chỉ đọc; giá trị mặc định đặt qua withDefaults hoặc cú pháp destructure có mặc định ở bản Vue mới.

Nguồn tham khảo

Vue — Props declaration in script setup

Câu 10Component Communication

Phát biểu nào sau đây SAI về slot trong Vue?

html

<!-- DataList.vue -->
<slot name="header" />
<li v-for="item in items" :key="item.id">
  <slot :item="item">{{ item.label }}</slot>
</li>

<!-- nơi dùng -->
<DataList :items="items">
  <template #header>Danh sách</template>
  <template #default="{ item }">{{ item.name }}</template>
</DataList>

A.Scoped slot cho phép component con truyền dữ liệu ngược ra cho nội dung mà cha viết
B.Nội dung trong slot được biên dịch trong phạm vi của con nên đọc được biến nội bộ của con
C.Slot cho phép component cha truyền cả một mảnh template vào con, thay vì chỉ truyền dữ liệu qua props
D.Named slot (<template #header>) cho phép chia nhiều vùng nội dung trong một component

Đáp án: B

Slot để cha truyền markup vào con. <slot> không tên là slot mặc định và nội dung viết bên trong thẻ <slot> là nội dung dự phòng. Named slot chia nhiều vùng (#header, #footer). Scoped slot cho con đưa dữ liệu ra ngoài (<slot :item="item"> → #default="{ item }"). Nội dung slot luôn được biên dịch trong phạm vi của cha.

Nguồn tham khảo

Vue — Slots

Câu 11Vue Router

Navigation guard nào phù hợp để chặn truy cập trang cần đăng nhập cho toàn bộ ứng dụng?

javascript

router.beforeEach((to) => {
  const auth = useAuthStore()
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { name: 'login', query: { redirect: to.fullPath } }
  }
})

A.router.beforeEach — guard toàn cục chạy trước mỗi lần điều hướng
B.Không cần guard, chỉ cần ẩn link trong menu điều hướng
C.beforeRouteLeave khai báo trong từng component
D.afterEach — vì nó chạy sau nên biết chắc chắn là route đã hợp lệ

Đáp án: A

Dùng router.beforeEach cho kiểm tra tập trung: đọc to.meta.requiresAuth, nếu chưa đăng nhập thì trả về route đăng nhập kèm redirect. Ngoài ra có beforeEnter cho một route cụ thể, và các hook trong component: beforeRouteEnter (chưa có this), beforeRouteUpdate, beforeRouteLeave (cảnh báo khi rời form dở dang). Guard chỉ là lớp trải nghiệm — phân quyền thật vẫn phải ở backend.

Nguồn tham khảo

Vue Router — Navigation guards

Câu 12Vue Router

Khai báo route động kèm lazy loading trong Vue Router như thế nào?

javascript

{
  path: '/users/:id',
  component: () => import('@/views/UserDetail.vue'),
  props: true,
}

A.Chuyển từ /users/1 sang /users/2 luôn tạo lại component nên không cần xử lý gì thêm cả
B.Tham số động :id, lazy load bằng hàm trả về import(), props: true để nhận qua prop
C.Tham số động chỉ đọc được qua window.location.pathname
D.Phải import tĩnh component rồi đặt thuộc tính lazy: true

Đáp án: B

Khai báo path: "/users/:id" và đặt component: () => import("@/views/UserDetail.vue") để bundler tách chunk riêng, chỉ tải khi vào route. props: true biến params thành prop nên component dễ test hơn và không phụ thuộc router. Lưu ý: điều hướng giữa hai id cùng route sẽ tái sử dụng component — phải watch params hoặc đặt :key trên <router-view> nếu cần tải lại.

Nguồn tham khảo

Vue Router — Lazy loading routes

Câu 13Pinia

Vì sao cần `storeToRefs` khi destructuring một Pinia store?

javascript

const store = useUserStore()

const { name, isAdmin } = store              // MẤT reactivity
const { name, isAdmin } = storeToRefs(store)  // giữ reactivity
const { login } = store                       // actions destructure trực tiếp được

A.Vì storeToRefs tạo bản sao store riêng cho mỗi component
B.Vì Pinia lưu state dưới dạng chuỗi JSON nên cần chuyển đổi kiểu mỗi khi đọc ra dùng
C.Vì actions cũng mất tính reactive nếu không dùng storeToRefs
D.Destructure trực tiếp làm mất liên kết; storeToRefs trả về ref nên vẫn cập nhật

Đáp án: D

Store Pinia là object reactive. Destructure trực tiếp lấy ra giá trị tại thời điểm đó cho state và getters, nên về sau chúng không cập nhật nữa. storeToRefs(store) bọc từng trường thành ref trỏ về cùng store, giữ được liên kết. Actions là hàm nên destructure thẳng vẫn đúng.

Nguồn tham khảo

Pinia — storeToRefs

Câu 14Performance

`<KeepAlive>` làm gì và ảnh hưởng thế nào tới lifecycle của component bên trong?

A.Giữ component trong DOM bằng cách đặt display: none
B.Giữ instance khi bị ẩn nên state được bảo toàn, kèm hook onActivated
C.Chỉ cache dữ liệu API mà component đã tải để lần sau khỏi phải gọi lại
D.Ngăn component bên trong bị render lại trong mọi trường hợp

Đáp án: B

<KeepAlive> giữ instance component trong bộ nhớ khi component bị chuyển đi, nên state, vị trí cuộn và dữ liệu đã tải vẫn còn khi quay lại. Component bên trong không chạy lại onMounted/onUnmounted mà dùng onActivated/onDeactivated. Có include, exclude và max để giới hạn số instance được giữ.

Nguồn tham khảo

Vue — KeepAlive

Câu 15Reactivity

Vì sao đôi khi phải `await nextTick()` trước khi đọc DOM?

javascript

items.value.push(newItem)
// DOM chưa có phần tử mới ở đây
await nextTick()
// giờ mới đo được chiều cao thật
list.value.scrollTop = list.value.scrollHeight

A.nextTick khiến Vue bỏ qua hàng đợi và cập nhật DOM ngay lập tức luôn
B.Vì ref cập nhật chậm nên phải chờ giá trị được gán xong
C.Vì trình duyệt cần thời gian để chạy CSS transition
D.Vue gom thay đổi rồi cập nhật DOM ở tick sau; nextTick chờ tới đó

Đáp án: D

Vue không cập nhật DOM ngay khi state đổi mà gom các thay đổi lại và render một lần ở microtask kế tiếp — nhờ vậy sửa state nhiều lần liên tiếp chỉ tốn một lần render. Vì thế ngay sau khi đổi state, DOM vẫn là trạng thái cũ. await nextTick() chờ tới sau lượt cập nhật đó, khi đã có thể đo kích thước, cuộn tới cuối, hoặc focus vào phần tử vừa xuất hiện.

Nguồn tham khảo

Vue — nextTick

Câu 16Reactivity

Destructuring một object `reactive` làm mất reactivity. Vì sao?

A.Destructure lấy ra giá trị nguyên thuỷ, tách khỏi proxy theo dõi
B.Destructure tạo một bản sao sâu của toàn bộ object
C.Vue chỉ theo dõi thuộc tính ở cấp một của object
D.Object bị đóng băng sau khi được destructure

Đáp án: A

Vì việc tách lấy ra giá trị tại thời điểm đó, không còn đi qua proxy theo dõi. Proxy chỉ chặn được việc đọc thuộc tính trên chính nó — một biến rời thì không có đường nào để hệ thống biết ai đang đọc.

Nguồn tham khảo

Vue docs — Reactivity in depth

Câu 17Reactivity

Trong `<script setup>`, `ref` cần `.value` nhưng trong template thì không. Vì sao?

A.Ref trong template được chuyển thành computed tự động
B.Trình biên dịch template tự mở ref ở cấp ngoài cùng
C.Template dùng một hệ thống reactivity khác với script
D.Template chỉ đọc được giá trị chứ không ghi được

Đáp án: B

Trình biên dịch template tự mở tham chiếu ở cấp ngoài cùng. Điều này chỉ áp cho các tham chiếu ở cấp đó — một tham chiếu nằm trong mảng hoặc trong object vẫn phải truy cập tường minh trong template.

Nguồn tham khảo

Vue docs — Reactivity in depth

Câu 18Reactivity

`watchEffect` khác `watch` ở điểm nào?

A.Nó chỉ theo dõi được một nguồn duy nhất
B.Nó tự thu thập phụ thuộc và chạy ngay lần đầu
C.Nó nhận được giá trị cũ còn cách kia thì không
D.Nó chạy bất đồng bộ còn cách kia chạy đồng bộ

Đáp án: B

Nó tự thu thập mọi phụ thuộc được đọc trong thân hàm và chạy ngay lần đầu. Cách kia phải nêu rõ nguồn cần theo dõi, đổi lại cho giá trị cũ và mặc định không chạy cho tới khi nguồn đổi.

Nguồn tham khảo

Vue docs — Reactivity in depth

Câu 19Component Communication

`useAttrs()` và `inheritAttrs: false` dùng để làm gì?

A.Chuyển các attribute HTML thành prop có kiểu
B.Kiểm soát nơi các attribute không khai báo được gắn vào
C.Ngăn component nhận bất kỳ attribute nào từ bên ngoài
D.Khai báo các prop bắt buộc mà component phải nhận

Đáp án: B

Kiểm soát nơi các thuộc tính không được khai báo làm prop được gắn vào. Mặc định chúng rơi vào phần tử gốc, nhưng một thành phần nhập liệu có lớp bọc thường cần chúng ở thẻ nhập bên trong.

Nguồn tham khảo

Vue docs — Props

Câu 20Component Communication

Component dùng `<script setup>` mặc định phơi ra gì cho component cha qua template ref?

A.Chỉ các hàm, còn dữ liệu thì không
B.Toàn bộ biến khai trong script
C.Chỉ các biến được khai bằng ref
D.Không gì cả — phải khai bằng defineExpose

Đáp án: D

Không gì cả. Cú pháp thiết lập đóng theo mặc định — muốn cho thành phần cha gọi một phương thức hay đọc một giá trị thì phải khai tường minh bằng macro tương ứng.

Nguồn tham khảo

Vue docs — Props

Câu 21Component Communication

Scoped slot khác slot thường ở điểm nào?

A.Nó chỉ nhận được nội dung dạng văn bản thuần
B.Nó có phạm vi CSS riêng tách khỏi component cha
C.Component con truyền dữ liệu ngược lên nội dung slot
D.Nó chỉ render khi component con quyết định cho phép

Đáp án: C

Thành phần con truyền dữ liệu ngược lên nội dung được chiếu vào. Nhờ đó một thành phần danh sách lo phần tải dữ liệu và phân trang, còn nơi sử dụng tự quyết định cách vẽ từng dòng bằng chính dữ liệu của dòng đó.

Nguồn tham khảo

Vue docs — Props

Câu 22Composition API

Khai `defineProps` với kiểu TypeScript khác khai bằng object runtime thế nào?

A.Object cho kiểm tra lúc biên dịch còn kiểu thì không
B.Kiểu chỉ dùng được với Options API
C.Kiểu cho kiểm tra lúc biên dịch
D.Hai cách hoàn toàn tương đương sau khi biên dịch

Đáp án: C

Khai bằng kiểu cho kiểm tra đầy đủ lúc biên dịch, và trình biên dịch tự sinh khai báo lúc chạy. Khai bằng đối tượng cho kiểm tra lúc chạy cùng giá trị mặc định trực tiếp — với dạng kiểu thì giá trị mặc định cần một macro riêng.

Nguồn tham khảo

Vue docs — Composition API FAQ

Câu 23Composition API

Gọi `onMounted()` bên trong một callback bất đồng bộ không có tác dụng. Vì sao?

A.Callback bất đồng bộ chạy sau khi component đã mount xong
B.Hook chỉ chạy một lần nên gọi lần hai bị bỏ qua
C.Hook phải đăng ký đồng bộ trong setup để gắn vào đúng instance
D.Hook không dùng được trong Composition API

Đáp án: C

Vì hook phải được đăng ký đồng bộ trong phần thiết lập để Vue biết gắn nó vào thể hiện nào. Sau điểm chờ đầu tiên, ngữ cảnh thể hiện đang được thiết lập không còn nữa.

Nguồn tham khảo

Vue docs — Composition API FAQ

Câu 24Directives

Modifier `.lazy`, `.number`, `.trim` của `v-model` làm gì?

A.Trì hoãn render, làm tròn số, và bỏ ký tự đặc biệt
B.Đồng bộ khi blur, ép sang số, và cắt khoảng trắng hai đầu
C.Bỏ qua lần đầu, kiểm tra kiểu số, và bắt buộc không rỗng
D.Tải chậm giá trị, định dạng số, và chuẩn hoá Unicode

Đáp án: B

Lần lượt: đồng bộ khi rời tiêu điểm thay vì mỗi lần gõ, ép giá trị sang kiểu số, và cắt khoảng trắng ở hai đầu. Ép sang số quan trọng vì giá trị từ ô nhập luôn là chuỗi, kể cả khi kiểu ô là số.

Nguồn tham khảo

Vue docs — Built-in directives

Câu 25Directives

Custom directive trong Vue 3 gồm những hook nào?

A.Các hook theo vòng đời element
B.Các hook giống hệt tên của Vue 2 để tương thích
C.Các hook do người viết tự đặt tên tuỳ ý
D.Chỉ một hàm duy nhất chạy khi element được tạo

Đáp án: A

Các hook đặt tên theo vòng đời của phần tử: trước khi gắn, đã gắn, trước khi cập nhật, đã cập nhật, trước khi gỡ, và đã gỡ. Tên này được đổi ở Vue 3 cho khớp với vòng đời thành phần, nên mã cũ cần cập nhật.

Nguồn tham khảo

Vue docs — Built-in directives

Câu 26Directives

`<component :is="...">` dùng để làm gì?

A.Khai báo component được phép dùng trong template
B.Tạo một component mới lúc chạy từ một chuỗi template
C.Render component được chọn động lúc chạy theo một giá trị
D.Chuyển một component thành web component chuẩn

Đáp án: C

Render một thành phần được chọn lúc chạy theo một giá trị — một đối tượng thành phần, hoặc tên của thành phần đã đăng ký. Nhờ đó một trang cấu hình vẽ đúng loại ô nhập theo dữ liệu mô tả, thay vì một chuỗi điều kiện dài.

Nguồn tham khảo

Vue docs — Built-in directives

Câu 27Performance

`defineAsyncComponent` mang lại lợi ích gì?

A.Cho phép component tự cập nhật mà không cần re-render cha
B.Cho phép component có setup là hàm bất đồng bộ
C.Tách component thành chunk riêng, chỉ tải khi thực sự render
D.Render component ở phía server thay vì client

Đáp án: C

Tách thành phần thành một gói riêng, chỉ tải khi nó thật sự được render. Một hộp thoại nặng hiếm khi mở, hay một thư viện biểu đồ chỉ dùng ở một tab — chúng không nên nằm trong gói tải về ở lần vào trang đầu tiên.

Nguồn tham khảo

Vue docs — Performance

Câu 28Performance

Directive `v-memo` dùng để làm gì?

A.Lưu trạng thái của component khi bị ẩn đi
B.Cache dữ liệu trả về từ API trong bộ nhớ
C.Ghi nhớ kết quả của một hàm để không phải tính lại
D.Bỏ qua việc cập nhật một cây con khi các giá trị phụ thuộc không đổi

Đáp án: D

Bỏ qua việc cập nhật một cây con khi các giá trị trong mảng phụ thuộc không đổi. Nó chỉ đáng dùng cho danh sách rất lớn — với danh sách nhỏ, chi phí so sánh còn lớn hơn lợi ích tiết kiệm được.

Nguồn tham khảo

Vue docs — Performance

Câu 29Pinia

Pinia store viết theo setup style khác option style thế nào?

A.Setup style dùng ref và computed như trong component
B.Option style nhanh hơn vì được tối ưu tốt hơn
C.Setup style không dùng được với devtools
D.Setup style không hỗ trợ getter tính toán

Đáp án: A

Lối viết thiết lập dùng đúng các nguyên thuỷ của thành phần: tham chiếu cho trạng thái, hàm tính toán cho giá trị suy ra, hàm thường cho hành động. Nhờ đó tái dùng được các hàm tổ hợp sẵn có ngay trong kho.

Nguồn tham khảo

Pinia docs — Core concepts

Câu 30Pinia

Một Pinia store gọi được store khác không?

A.Được — gọi hàm tạo store kia bên trong action hoặc getter
B.Chỉ được khi hai store cùng nằm trong một module
C.Không — store phải hoàn toàn độc lập với nhau
D.Được, nhưng phải khai báo quan hệ trong cấu hình

Đáp án: A

Được — gọi hàm tạo kho kia ngay bên trong hành động hoặc getter. Thư viện này không có khái niệm module lồng nhau như thư viện tiền nhiệm, nên các kho phẳng và tham chiếu lẫn nhau tự do.

Nguồn tham khảo

Pinia docs — Core concepts

Câu 31Vue Router

Điều hướng từ `/user/1` sang `/user/2` không làm component chạy lại setup. Vì sao?

A.Router cache lại kết quả của lần điều hướng trước
B.Cùng component nên nó được tái dùng thay vì dựng lại
C.Tham số route không được coi là thay đổi thực sự
D.Setup chỉ chạy một lần cho toàn bộ ứng dụng

Đáp án: B

Vì cùng một thành phần nên router tái dùng nó thay vì huỷ và dựng lại. Cách xử lý là theo dõi tham số route và phản ứng khi nó đổi, hoặc gắn một khoá vào thẻ hiển thị route để ép dựng lại.

Nguồn tham khảo

Vue Router docs — Getting started

Câu 32Vue Router

Navigation guard trả về `false` khác trả về một object route thế nào?

A.Hai cách tương đương, chỉ khác cú pháp
B.Trả false huỷ điều hướng tại chỗ; trả object chuyển sang route đó
C.Trả false chỉ cảnh báo còn trả object mới thực sự chặn
D.Trả object chỉ hoạt động trong guard toàn cục

Đáp án: B

Trả về giá trị sai huỷ việc điều hướng và giữ nguyên trang hiện tại. Trả về một đối tượng route thì chuyển hướng sang route đó. Huỷ tại chỗ khiến người dùng bấm mà không có gì xảy ra và không hiểu vì sao.

Nguồn tham khảo

Vue Router docs — Getting started

Câu 33SSR & Nuxt

Trong Nuxt, `useState` khác `ref` thông thường ở điểm nào?

A.Nó lưu giá trị vào bộ nhớ cục bộ của trình duyệt
B.Nó chia sẻ theo key và truyền được từ server sang client
C.Nó chỉ hoạt động ở phía client
D.Nó tự đồng bộ với một API backend

Đáp án: B

Nó chia sẻ trạng thái theo khoá và truyền được từ máy chủ sang client trong quá trình render. Một biến khai ở cấp module thì bị chia sẻ giữa mọi request trên máy chủ — gây rò rỉ dữ liệu giữa những người dùng khác nhau.

Nguồn tham khảo

Vue docs — Server-side rendering

Câu 34Vue Router

Trường `meta` của route dùng để làm gì?

A.Cấu hình cách route được cache trong bộ nhớ
B.Gắn dữ liệu tuỳ ý cho route, đọc được trong guard và component
C.Khai báo các thẻ meta HTML cho SEO của trang
D.Khai báo các tham số bắt buộc của route

Đáp án: B

Gắn dữ liệu tuỳ ý cho một route, đọc được trong các guard và trong thành phần. Nhờ đó một guard toàn cục kiểm tra một cờ trong đó — thay vì so khớp một danh sách đường dẫn cứng phải sửa mỗi lần thêm trang.

Nguồn tham khảo

Vue Router docs — Getting started

Câu 35Vue Router

`scrollBehavior` trong Vue Router giải quyết vấn đề gì?

A.Quyết định vị trí cuộn sau mỗi lần điều hướng
B.Tối ưu hiệu năng khi cuộn qua danh sách dài
C.Tự tải thêm nội dung khi cuộn tới cuối trang
D.Đồng bộ vị trí cuộn giữa nhiều tab trình duyệt

Đáp án: A

Quyết định vị trí cuộn sau mỗi lần điều hướng. Không có nó, chuyển trang giữ nguyên vị trí cuộn cũ — người dùng bấm vào một trang mới và thấy mình đang ở giữa nội dung.

Nguồn tham khảo

Vue Router docs — Getting started

Câu 36Pinia

Muốn tự động lưu state của Pinia vào localStorage nên làm thế nào?

A.Bật một tuỳ chọn trong cấu hình khi tạo store
B.Đặt state trực tiếp vào localStorage thay vì trong store
C.Dùng plugin của Pinia hoặc $subscribe để bắt mọi thay đổi
D.Gọi lưu trong từng action sau khi cập nhật state

Đáp án: C

Dùng một trình cắm — có thư viện sẵn cho việc này — hoặc phương thức đăng ký theo dõi thay đổi của kho. Trình cắm áp cho mọi kho một lần, thay vì lặp lại logic lưu trữ ở từng hành động.

Nguồn tham khảo

Pinia docs — Core concepts

Câu 37Pinia

Test một component dùng Pinia store cần chuẩn bị gì?

A.Thay store bằng một object giả tự viết
B.Tạo một instance Pinia mới cho mỗi test để state không lẫn nhau
C.Chạy test trong một trình duyệt thật thay vì môi trường giả lập
D.Khai báo store trong chính file test thay vì import

Đáp án: B

Tạo một thể hiện mới của thư viện cho mỗi bài kiểm thử và cài nó vào ứng dụng đang kiểm thử. Kho là đối tượng dùng chung, nên dùng lại giữa các bài khiến trạng thái lẫn nhau và kết quả phụ thuộc thứ tự chạy.

Nguồn tham khảo

Pinia docs — Core concepts

Câu 38Directives

`<Transition>` và `<TransitionGroup>` khác nhau ở điểm nào?

A.Loại sau xử lý danh sách và có thêm hiệu ứng di chuyển vị trí
B.Loại đầu dùng CSS còn loại sau dùng JavaScript
C.Loại sau chỉ hoạt động với v-for có khoá là chỉ số
D.Loại đầu chạy khi mount còn loại sau khi unmount

Đáp án: A

Loại đầu bọc một phần tử và xử lý hiệu ứng vào ra. Loại sau bọc một danh sách, cho phép hiệu ứng cho từng phần tử được thêm hoặc xoá, và thêm một lớp đặc biệt cho việc di chuyển vị trí khi danh sách sắp xếp lại.

Nguồn tham khảo

Vue docs — Built-in directives

Câu 39Core Concepts

Scoped CSS trong SFC hoạt động bằng cách nào?

A.CSS chỉ được nạp khi component được render
B.Mỗi component được render trong shadow DOM riêng
C.Trình biên dịch thêm attribute duy nhất vào element và selector
D.CSS được đổi tên class thành chuỗi băm

Đáp án: C

Trình biên dịch thêm một thuộc tính duy nhất vào các phần tử của thành phần và vào bộ chọn CSS tương ứng. Vì vậy kiểu của thành phần cha không lọt vào bên trong thành phần con.

Nguồn tham khảo

Vue docs — Creating an application

Câu 40Composition API

`defineModel()` (Vue 3.4+) thay thế cách viết nào?

A.Việc khai báo store cho state dùng chung
B.Việc dùng provide và inject giữa các cấp
C.Cặp prop modelValue và emit update:modelValue viết tay
D.Việc khai báo props bằng defineProps

Đáp án: C

Cặp prop và sự kiện phát ra theo quy ước tên mà trước đây phải viết tay. Nó trả về một tham chiếu ghi được, và việc phát sự kiện diễn ra tự động khi bạn ghi vào nó.

Nguồn tham khảo

Vue docs — Composition API FAQ

Câu 41Core Concepts

Biến môi trường trong dự án Vite phải có tiền tố gì để đọc được từ client?

A.Không cần tiền tố; mọi biến đều đọc được
B.VITE_ — biến không có tiền tố này không vào bundle
C.PUBLIC_ theo quy ước chung của các công cụ build
D.NEXT_PUBLIC_ vì đây là quy ước chuẩn

Đáp án: B

Tiền tố riêng của công cụ này. Biến không có tiền tố đó không đi vào gói gửi tới trình duyệt — một rào chắn có chủ đích để khoá bí mật trong tệp môi trường không vô tình bị lộ.

Nguồn tham khảo

Vue docs — Creating an application

Câu 42Performance

Danh sách 10.000 dòng render chậm dù đã có `:key` đúng. Hướng xử lý?

A.Virtual scrolling — chỉ render các dòng đang trong viewport
B.Thêm v-memo cho từng dòng để bỏ qua cập nhật
C.Chuyển state sang shallowRef để giảm chi phí proxy
D.Dùng v-show thay v-if cho từng dòng

Đáp án: A

Cuộn ảo: chỉ render các dòng đang nằm trong vùng nhìn thấy cộng một ít đệm hai đầu. Vấn đề gốc là số phần tử DOM thật — khoá đúng chỉ giúp việc cập nhật chứ không giảm số phần tử phải tạo.

Nguồn tham khảo

Vue docs — Performance

Câu 43SSR & Nuxt

Component dùng `window` gây lỗi khi SSR. Cách xử lý trong Nuxt?

A.Thêm một kiểm tra kiểu cho biến đó trong TypeScript
B.Bọc trong <ClientOnly> hoặc chuyển vào hook client
C.Thay window bằng globalThis
D.Tắt SSR cho toàn bộ ứng dụng

Đáp án: B

Bọc phần đó trong thẻ chỉ render ở client, hoặc chuyển việc truy cập vào một hook chỉ chạy sau khi gắn kết. Trên máy chủ không có đối tượng cửa sổ nên mọi truy cập trực tiếp đều ném lỗi lúc render.

Nguồn tham khảo

Vue docs — Server-side rendering

Câu 44Core Concepts

Test một composable riêng lẻ (không qua component) làm thế nào?

A.Phải chuyển composable thành một hàm thuần trước khi test
B.Composable không test đơn vị được, chỉ test qua component
C.Luôn phải mount một component vì composable cần instance
D.Gọi trực tiếp nếu không dùng lifecycle; nếu có thì bọc trong component tạm

Đáp án: D

Gọi trực tiếp nếu nó chỉ dùng các nguyên thuỷ phản ứng. Nếu nó đăng ký hook vòng đời hoặc nhận giá trị từ tổ tiên thì bọc trong một thành phần tạm, vì các hook đó cần một thể hiện để gắn vào.

Nguồn tham khảo

Vue docs — Creating an application

Câu 45Core Concepts

Vue Test Utils khuyến nghị test theo hướng nào?

A.Test bằng cách gọi trực tiếp các hàm trong setup
B.Test mọi method và computed của component
C.Test qua những gì người dùng thấy và làm, không qua state nội bộ
D.Chỉ test snapshot của HTML được render

Đáp án: C

Kiểm thử qua những gì người dùng thấy và làm: nội dung hiển thị, phản ứng khi bấm, dữ liệu phát ra. Kiểm tra trạng thái nội bộ khiến bài kiểm thử hỏng khi tái cấu trúc dù hành vi không hề đổi.

Nguồn tham khảo

Vue docs — Creating an application

Câu 46Core Concepts

Auto-import component trong Nuxt hoặc qua plugin có đánh đổi gì?

A.Bớt dòng import, đổi lại khó lần nguồn gốc của một tên
B.Component được đăng ký toàn cục nên nằm hết trong bundle chính
C.Mất khả năng kiểm tra kiểu cho props
D.Bundle nhỏ hơn vì component được tải theo yêu cầu

Đáp án: A

Bớt được các dòng nhập lặp lại, đổi lại khó lần nguồn gốc của một tên khi đọc mã. Người mới vào dự án thấy một thành phần trong template mà không có manh mối nào về nơi nó được định nghĩa.

Nguồn tham khảo

Vue docs — Creating an application

Câu 47Render & Migration

Khi nào nên dùng JSX/render function thay vì template trong Vue?

A.Khi cấu trúc phụ thuộc logic phức tạp mà template khó diễn đạt
B.Khi cần hiệu năng render tốt hơn template
C.Khi component có nhiều props cần kiểm tra kiểu
D.Khi component cần dùng slot có phạm vi

Đáp án: A

Khi cấu trúc phụ thuộc vào logic phức tạp mà template khó diễn đạt — ví dụ một thành phần tiêu đề chọn thẻ theo cấp, hay một thành phần bọc biến đổi các phần tử con. Template được tối ưu tốt hơn nhờ phân tích tĩnh, nên chỉ đổi khi thật sự cần.

Nguồn tham khảo

Vue docs — Render functions

Câu 48Component Communication

`provide`/`inject` nên dùng thay props trong tình huống nào?

A.Khi dữ liệu phải đi qua nhiều cấp mà các cấp giữa không dùng tới
B.Khi dữ liệu cần được chia sẻ giữa các nhánh khác nhau của cây
C.Khi cần dữ liệu phản ứng thay vì giá trị tĩnh
D.Bất cứ khi nào cần truyền dữ liệu xuống component con

Đáp án: A

Khi dữ liệu phải đi qua nhiều cấp mà các cấp ở giữa không dùng tới — chủ đề giao diện, cấu hình vùng miền, hoặc trạng thái dùng chung trong một nhóm thành phần liên quan như một bảng và các dòng của nó.

Nguồn tham khảo

Vue docs — Props

Câu 49Reactivity

Sau khi đổi một reactive value, đọc `element.offsetHeight` ngay lập tức cho giá trị cũ. Vì sao?

A.Element bị cache lại nên trả về thông tin cũ
B.Trình duyệt chưa kịp tính lại layout sau khi DOM đổi
C.Giá trị reactive chưa được cập nhật ngay khi gán
D.Vue gom các cập nhật và áp lên DOM ở microtask kế tiếp

Đáp án: D

Vue gom các cập nhật và áp lên DOM ở lượt xử lý vi mô kế tiếp, không phải ngay khi giá trị đổi. Chờ tới lượt cập nhật đó bằng hàm tương ứng rồi mới đọc DOM.

Nguồn tham khảo

Vue docs — Reactivity in depth

Câu 50Performance

`<KeepAlive>` ảnh hưởng thế nào tới lifecycle của component bên trong?

A.Component bị đóng băng và không nhận cập nhật nữa
B.Component không bị unmount mà chuyển sang trạng thái deactivated
C.Component vẫn unmount nhưng state được lưu lại
D.Các hook vòng đời chạy như bình thường

Đáp án: B

Thành phần không bị gỡ mà chuyển sang trạng thái ngừng hoạt động, với hai hook riêng cho việc kích hoạt lại và ngừng hoạt động. Vì vậy hook dọn dẹp khi huỷ không chạy — việc dọn phải chuyển sang hook ngừng hoạt động.

Nguồn tham khảo

Vue docs — Performance

Câu 51Component Communication

`<Teleport>` render nội dung ở đâu và giữ gì?

A.Ra element khác trong DOM, giữ quan hệ component cha con
B.Ra một iframe riêng để cô lập hoàn toàn
C.Ra một component khác được chỉ định bằng tên
D.Ra shadow DOM của element đích

Đáp án: A

Ra một phần tử khác trong DOM — thường là thẻ thân tài liệu — nhưng giữ nguyên quan hệ thành phần cha con. Nhờ đó một hộp thoại thoát khỏi ràng buộc CSS của cha mà vẫn nhận prop và phát sự kiện bình thường.

Nguồn tham khảo

Vue docs — Props

Câu 52Core Concepts

Vue plugin (`app.use()`) thường dùng để làm gì?

A.Đăng ký component toàn cục, directive và provide cấp app
B.Cấu hình quá trình build của ứng dụng
C.Thay đổi cách hệ thống reactivity hoạt động
D.Mở rộng cú pháp template bằng các thẻ mới

Đáp án: A

Đăng ký các thứ ở cấp ứng dụng: thành phần toàn cục, directive, thuộc tính toàn cục, và các giá trị cung cấp cho toàn bộ cây. Router và thư viện trạng thái đều được cài theo cách này.

Nguồn tham khảo

Vue docs — Creating an application

Còn 18 câu Vue.js mức Nâng cao

Phần Nâng cao đi vào tình huống chuyên sâu và các bẫy kỹ thuật hay gặp, dành cho thành viên Pro.

Nâng cấp gói

Đáp án Quiz Vue.js — 62 câu hỏi có giải thích

10 câu Cơ bản · 52 câu Trung bình

Thử sức Quiz Vue.js

Mức Cơ bản — 10 câu Vue.js

Câu 1Core Concepts

Vue khác React ở điểm nào là cốt lõi nhất khi viết giao diện?

A.Vue chỉ chạy được với JavaScript thuần, hoàn toàn không hỗ trợ TypeScript
B.Vue hoàn toàn không dùng virtual DOM, còn React thì có
C.Vue dùng template + directive và tự theo dõi phụ thuộc; React dùng JSX
D.Vue là framework cho backend, React là thư viện frontend

Đáp án: C

Nguồn tham khảo

Vue — Introduction

Câu 2Core Concepts

Options API và Composition API khác nhau thế nào?

A.Composition API chạy nhanh hơn nhiều lần vì không dùng tới hệ reactivity
B.Options API tổ chức theo loại; Composition API tổ chức theo mối quan tâm
C.Options API đã bị gỡ khỏi Vue 3 nên code cũ phải viết lại
D.Composition API chỉ dùng được khi viết bằng TypeScript

Đáp án: B

Nguồn tham khảo

Vue — Composition API FAQ

Câu 3Core Concepts

`<script setup>` khác `setup()` thông thường ở điểm nào?

html

<script setup>
import { ref } from 'vue'
import UserCard from './UserCard.vue'

const count = ref(0)
</script>

<template>
  <UserCard />
  <button @click="count++">{{ count }}</button>
</template>

A.Component import vào vẫn phải khai báo thêm trong mục components
B.Cho phép bỏ hoàn toàn hệ thống reactivity — biến thường cũng tự cập nhật view
C.Các macro defineProps/defineEmits phải import từ vue trước khi dùng
D.Biến khai báo ở cấp cao nhất tự dùng được trong template, không cần return

Đáp án: D

Nguồn tham khảo

Vue — script setup

Câu 4Core Concepts

Single File Component (SFC) là gì?

A.Một định dạng chạy trực tiếp trong trình duyệt mà không cần bước build
B.Một file JavaScript chứa toàn bộ component của ứng dụng
C.Một file .vue gồm ba khối <template>, <script> và <style>
D.Một cách viết chỉ dùng được với Options API của Vue 2

Đáp án: C

Nguồn tham khảo

Vue — Single-File Components

Câu 5Directives

Trong template dưới đây, mỗi directive làm gì?

html

<img :src="avatar" :alt="name">
<button @click="save">Lưu</button>
<input v-model="keyword">
<p v-if="items.length">Có {{ items.length }} mục</p>

A.v-if chỉ ẩn phần tử bằng CSS, phần tử vẫn nằm trong DOM
B.: = v-bind, @ = v-on, v-model two-way, v-if render có điều kiện
C.v-model chỉ đọc giá trị từ state ra input chứ không ghi ngược lại vào state
D.: và @ là cú pháp riêng của JSX, Vue không hỗ trợ

Đáp án: B

Nguồn tham khảo

Vue — Template syntax

Câu 6Directives

Khi nào chọn `v-show` thay vì `v-if`?

A.Khi muốn phần tử biến mất hoàn toàn khỏi cây DOM
B.Khi cần dùng kèm với v-else trong cùng khối
C.Khi phần tử gần như không bao giờ hiển thị — dùng v-show để khỏi tốn tài nguyên
D.Khi phần tử bật/tắt liên tục — v-show chỉ đổi display nên chuyển rẻ

Đáp án: D

Nguồn tham khảo

Vue — Conditional rendering

Câu 7Component Communication

Các cách truyền dữ liệu giữa component trong Vue tương ứng với tình huống nào?

A.Cha→con props, con→cha emit, xuyên cấp provide/inject, dùng chung store
B.provide/inject dùng để gửi sự kiện từ con ngược lên cha
C.Component con có thể gán trực tiếp vào prop để cập nhật lại dữ liệu của cha
D.Mọi trường hợp đều nên dùng store toàn cục để đồng nhất

Đáp án: A

Nguồn tham khảo

Vue — Component events

Câu 8Vue Router

Thiết lập Vue Router cơ bản gồm những phần nào?

javascript

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/users/:id', component: UserDetail },
  ],
})

app.use(router)

A.createRouter với routes, app.use(router), <router-view>, <router-link>
B.Trong code chỉ điều hướng được bằng window.location
C.Điều hướng bằng thẻ <a href> để giữ nguyên hành vi điều hướng chuẩn của trình duyệt
D.Chỉ cần đặt file component vào thư mục pages, Vue tự sinh route

Đáp án: A

Nguồn tham khảo

Vue Router — Getting started

Câu 9Pinia

Pinia khác Vuex ở những điểm nào đáng kể?

A.Pinia chỉ lưu được dữ liệu dạng chuỗi nên phải tự serialize
B.Pinia không dùng reactivity của Vue mà tự cài lại cơ chế riêng của mình
C.Pinia bắt buộc mọi thay đổi state phải đi qua mutation đồng bộ
D.Bỏ mutation, store phẳng không lồng nhau, suy luận TypeScript tốt hơn

Đáp án: D

Nguồn tham khảo

Pinia — Introduction

Câu 10Directives

Cần bật/tắt class CSS theo trạng thái component. Cú pháp nào của Vue phù hợp?

A.Nối chuỗi thủ công trong :class là cách duy nhất
B.Dùng document.querySelector trong onMounted để thêm class
C.:class nhận object { tên-class: điều-kiện }, hoặc mảng để gộp nhiều nguồn
D.Phải dùng v-if để render ra hai phiên bản element với class khác nhau hoàn toàn

Đáp án: C

Nguồn tham khảo

Vue docs — Reactivity fundamentals

Mức Trung bình — 52 câu Vue.js

Câu 1Directives

Vì sao `:key` trong `v-for` quan trọng, và vì sao không nên dùng chỉ số làm key?

A.Key dùng để Vue sắp xếp danh sách theo thứ tự tăng dần
B.Key chỉ để tránh cảnh báo trong console, không ảnh hưởng hành vi
C.Dùng chỉ số luôn tốt hơn vì nó luôn là số nguyên duy nhất trong toàn bộ danh sách
D.Key là danh tính của item; chỉ số bị dịch khi chèn/xoá nên Vue tái dùng sai node

Đáp án: D

Nguồn tham khảo

Vue — List rendering: maintaining state with key

Câu 2Directives

`v-model` trên một component tự viết được biên dịch thành gì?

html

<!-- cha viết -->
<MyInput v-model="keyword" />

<!-- tương đương -->
<MyInput :model-value="keyword" @update:model-value="keyword = $event" />

A.Một prop modelValue truyền xuống cộng sự kiện update:modelValue phát lên
B.Một tham chiếu chung khiến cha và con cùng trỏ tới một biến, sửa bên nào cũng đổi
C.Một lời gọi trực tiếp tới document.querySelector để đọc giá trị input
D.Một store toàn cục ngầm do Vue tạo ra cho mỗi component

Đáp án: A

Nguồn tham khảo

Vue — Component v-model

Câu 3Reactivity

Hệ thống reactivity của Vue 3 hoạt động dựa trên cơ chế nào?

A.So sánh sâu toàn bộ state sau mỗi sự kiện để tìm ra những chỗ vừa thay đổi
B.Object.defineProperty cho từng thuộc tính, giống hệt Vue 2
C.Proxy bao quanh object: đọc thì track phụ thuộc, ghi thì trigger effect
D.Polling định kỳ để kiểm tra giá trị có đổi hay không

Đáp án: C

Nguồn tham khảo

Vue — Reactivity in depth

Câu 4Reactivity

Phát biểu nào sau đây SAI về `ref` và `reactive`?

javascript

const count = ref(0)
count.value++

const state = reactive({ user: { name: 'An' } })
const { user } = state       // vẫn reactive (object)
const { name } = state.user  // MẤT reactivity (primitive)

A.Trong template thì vẫn phải viết .value mỗi khi đọc giá trị của một ref
B.Destructure object reactive lấy primitive sẽ mất reactive, trừ khi dùng toRefs
C.reactive chỉ nhận object/array/Map/Set, không dùng được cho số hay chuỗi
D.ref dùng được cho cả primitive lẫn object, truy cập qua .value trong script

Đáp án: A

Nguồn tham khảo

Vue — Reactivity fundamentals

Câu 5Reactivity

`computed`, `watch` và `watchEffect` nên dùng trong tình huống nào?

A.computed và watch giống hệt nhau, chọn cái nào cũng được
B.watchEffect chỉ chạy một lần khi component mount chứ không bao giờ chạy lại nữa
C.computed cho giá trị dẫn xuất, watch theo nguồn cụ thể, watchEffect tự dò
D.Nên đặt lời gọi API trong computed để tự cache kết quả

Đáp án: C

Nguồn tham khảo

Vue — Watchers

Câu 6Composition API

Composable là gì và hơn mixin ở điểm nào?

javascript

export function useCounter(initial = 0) {
  const count = ref(initial)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
}

A.Hàm đóng gói logic có state; nguồn gốc mỗi biến rõ ràng tại chỗ gọi
B.Composable là một component không có phần template
C.Mixin an toàn hơn vì Vue tự cảnh báo mỗi khi có trùng tên thuộc tính
D.Composable chỉ chứa được hàm thuần, không giữ được state

Đáp án: A

Nguồn tham khảo

Vue — Composables

Câu 7Composition API

Trong Composition API, `created` và `beforeCreate` tương ứng với cái gì?

A.Không có gì tương ứng; phải quay lại Options API nếu cần chạy code lúc khởi tạo component
B.onMounted — vì mount xảy ra ngay sau created
C.Chính phần thân của setup, chạy ở thời điểm tương đương nên không có hook riêng
D.onCreated và onBeforeCreate — chỉ đổi tên có tiền tố on

Đáp án: C

Nguồn tham khảo

Vue — Lifecycle hooks

Câu 8Composition API

`provide` / `inject` dùng khi nào và cần lưu ý gì để giá trị vẫn reactive?

javascript

// component cha
const theme = ref('dark')
provide('theme', theme)          // truyền cả ref

// component cháu
const theme = inject('theme')     // theme.value phản ánh thay đổi từ cha

A.Dùng để gửi sự kiện từ con lên cha thay cho việc emit
B.Truyền xuống nhiều cấp; provide chính ref/reactive chứ không phải .value
C.Giá trị inject luôn giữ được tính reactive kể cả khi provide một số nguyên thường
D.Chỉ dùng được giữa cha và con trực tiếp, không xuyên nhiều cấp

Đáp án: B

Nguồn tham khảo

Vue — Provide / Inject

Câu 9Composition API

`defineProps` và `defineEmits` trong `<script setup>` có gì đặc biệt?

typescript

const props = defineProps<{ id: string; compact?: boolean }>()
const emit = defineEmits<{ (e: 'select', id: string): void }>()

function pick() {
  emit('select', props.id)
}

A.Là macro xử lý lúc biên dịch — không cần import, khai báo được bằng kiểu TypeScript
B.defineProps trả về object có thể gán lại để cập nhật giá trị prop
C.Phải khai báo cả hai kể cả khi component không nhận prop nào và cũng không phát sự kiện nào
D.Chúng là hàm runtime import từ vue, gọi được ở bất kỳ đâu trong file

Đáp án: A

Nguồn tham khảo

Vue — Props declaration in script setup

Câu 10Component Communication

Phát biểu nào sau đây SAI về slot trong Vue?

html

<!-- DataList.vue -->
<slot name="header" />
<li v-for="item in items" :key="item.id">
  <slot :item="item">{{ item.label }}</slot>
</li>

<!-- nơi dùng -->
<DataList :items="items">
  <template #header>Danh sách</template>
  <template #default="{ item }">{{ item.name }}</template>
</DataList>

A.Scoped slot cho phép component con truyền dữ liệu ngược ra cho nội dung mà cha viết
B.Nội dung trong slot được biên dịch trong phạm vi của con nên đọc được biến nội bộ của con
C.Slot cho phép component cha truyền cả một mảnh template vào con, thay vì chỉ truyền dữ liệu qua props
D.Named slot (<template #header>) cho phép chia nhiều vùng nội dung trong một component

Đáp án: B

Nguồn tham khảo

Vue — Slots

Câu 11Vue Router

Navigation guard nào phù hợp để chặn truy cập trang cần đăng nhập cho toàn bộ ứng dụng?

javascript

router.beforeEach((to) => {
  const auth = useAuthStore()
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { name: 'login', query: { redirect: to.fullPath } }
  }
})

A.router.beforeEach — guard toàn cục chạy trước mỗi lần điều hướng
B.Không cần guard, chỉ cần ẩn link trong menu điều hướng
C.beforeRouteLeave khai báo trong từng component
D.afterEach — vì nó chạy sau nên biết chắc chắn là route đã hợp lệ

Đáp án: A

Nguồn tham khảo

Vue Router — Navigation guards

Câu 12Vue Router

Khai báo route động kèm lazy loading trong Vue Router như thế nào?

javascript

{
  path: '/users/:id',
  component: () => import('@/views/UserDetail.vue'),
  props: true,
}

A.Chuyển từ /users/1 sang /users/2 luôn tạo lại component nên không cần xử lý gì thêm cả
B.Tham số động :id, lazy load bằng hàm trả về import(), props: true để nhận qua prop
C.Tham số động chỉ đọc được qua window.location.pathname
D.Phải import tĩnh component rồi đặt thuộc tính lazy: true

Đáp án: B

Nguồn tham khảo

Vue Router — Lazy loading routes

Câu 13Pinia

Vì sao cần `storeToRefs` khi destructuring một Pinia store?

javascript

const store = useUserStore()

const { name, isAdmin } = store              // MẤT reactivity
const { name, isAdmin } = storeToRefs(store)  // giữ reactivity
const { login } = store                       // actions destructure trực tiếp được

A.Vì storeToRefs tạo bản sao store riêng cho mỗi component
B.Vì Pinia lưu state dưới dạng chuỗi JSON nên cần chuyển đổi kiểu mỗi khi đọc ra dùng
C.Vì actions cũng mất tính reactive nếu không dùng storeToRefs
D.Destructure trực tiếp làm mất liên kết; storeToRefs trả về ref nên vẫn cập nhật

Đáp án: D

Nguồn tham khảo

Pinia — storeToRefs

Câu 14Performance

`<KeepAlive>` làm gì và ảnh hưởng thế nào tới lifecycle của component bên trong?

A.Giữ component trong DOM bằng cách đặt display: none
B.Giữ instance khi bị ẩn nên state được bảo toàn, kèm hook onActivated
C.Chỉ cache dữ liệu API mà component đã tải để lần sau khỏi phải gọi lại
D.Ngăn component bên trong bị render lại trong mọi trường hợp

Đáp án: B

Nguồn tham khảo

Vue — KeepAlive

Câu 15Reactivity

Vì sao đôi khi phải `await nextTick()` trước khi đọc DOM?

javascript

items.value.push(newItem)
// DOM chưa có phần tử mới ở đây
await nextTick()
// giờ mới đo được chiều cao thật
list.value.scrollTop = list.value.scrollHeight

A.nextTick khiến Vue bỏ qua hàng đợi và cập nhật DOM ngay lập tức luôn
B.Vì ref cập nhật chậm nên phải chờ giá trị được gán xong
C.Vì trình duyệt cần thời gian để chạy CSS transition
D.Vue gom thay đổi rồi cập nhật DOM ở tick sau; nextTick chờ tới đó

Đáp án: D

Nguồn tham khảo

Vue — nextTick

Câu 16Reactivity

Destructuring một object `reactive` làm mất reactivity. Vì sao?

A.Destructure lấy ra giá trị nguyên thuỷ, tách khỏi proxy theo dõi
B.Destructure tạo một bản sao sâu của toàn bộ object
C.Vue chỉ theo dõi thuộc tính ở cấp một của object
D.Object bị đóng băng sau khi được destructure

Đáp án: A

Nguồn tham khảo

Vue docs — Reactivity in depth

Câu 17Reactivity

Trong `<script setup>`, `ref` cần `.value` nhưng trong template thì không. Vì sao?

A.Ref trong template được chuyển thành computed tự động
B.Trình biên dịch template tự mở ref ở cấp ngoài cùng
C.Template dùng một hệ thống reactivity khác với script
D.Template chỉ đọc được giá trị chứ không ghi được

Đáp án: B

Nguồn tham khảo

Vue docs — Reactivity in depth

Câu 18Reactivity

`watchEffect` khác `watch` ở điểm nào?

A.Nó chỉ theo dõi được một nguồn duy nhất
B.Nó tự thu thập phụ thuộc và chạy ngay lần đầu
C.Nó nhận được giá trị cũ còn cách kia thì không
D.Nó chạy bất đồng bộ còn cách kia chạy đồng bộ

Đáp án: B

Nguồn tham khảo

Vue docs — Reactivity in depth

Câu 19Component Communication

`useAttrs()` và `inheritAttrs: false` dùng để làm gì?

A.Chuyển các attribute HTML thành prop có kiểu
B.Kiểm soát nơi các attribute không khai báo được gắn vào
C.Ngăn component nhận bất kỳ attribute nào từ bên ngoài
D.Khai báo các prop bắt buộc mà component phải nhận

Đáp án: B

Nguồn tham khảo

Vue docs — Props

Câu 20Component Communication

Component dùng `<script setup>` mặc định phơi ra gì cho component cha qua template ref?

A.Chỉ các hàm, còn dữ liệu thì không
B.Toàn bộ biến khai trong script
C.Chỉ các biến được khai bằng ref
D.Không gì cả — phải khai bằng defineExpose

Đáp án: D

Nguồn tham khảo

Vue docs — Props

Câu 21Component Communication

Scoped slot khác slot thường ở điểm nào?

A.Nó chỉ nhận được nội dung dạng văn bản thuần
B.Nó có phạm vi CSS riêng tách khỏi component cha
C.Component con truyền dữ liệu ngược lên nội dung slot
D.Nó chỉ render khi component con quyết định cho phép

Đáp án: C

Nguồn tham khảo

Vue docs — Props

Câu 22Composition API

Khai `defineProps` với kiểu TypeScript khác khai bằng object runtime thế nào?

A.Object cho kiểm tra lúc biên dịch còn kiểu thì không
B.Kiểu chỉ dùng được với Options API
C.Kiểu cho kiểm tra lúc biên dịch
D.Hai cách hoàn toàn tương đương sau khi biên dịch

Đáp án: C

Nguồn tham khảo

Vue docs — Composition API FAQ

Câu 23Composition API

Gọi `onMounted()` bên trong một callback bất đồng bộ không có tác dụng. Vì sao?

A.Callback bất đồng bộ chạy sau khi component đã mount xong
B.Hook chỉ chạy một lần nên gọi lần hai bị bỏ qua
C.Hook phải đăng ký đồng bộ trong setup để gắn vào đúng instance
D.Hook không dùng được trong Composition API

Đáp án: C

Nguồn tham khảo

Vue docs — Composition API FAQ

Câu 24Directives

Modifier `.lazy`, `.number`, `.trim` của `v-model` làm gì?

A.Trì hoãn render, làm tròn số, và bỏ ký tự đặc biệt
B.Đồng bộ khi blur, ép sang số, và cắt khoảng trắng hai đầu
C.Bỏ qua lần đầu, kiểm tra kiểu số, và bắt buộc không rỗng
D.Tải chậm giá trị, định dạng số, và chuẩn hoá Unicode

Đáp án: B

Nguồn tham khảo

Vue docs — Built-in directives

Câu 25Directives

Custom directive trong Vue 3 gồm những hook nào?

A.Các hook theo vòng đời element
B.Các hook giống hệt tên của Vue 2 để tương thích
C.Các hook do người viết tự đặt tên tuỳ ý
D.Chỉ một hàm duy nhất chạy khi element được tạo

Đáp án: A

Nguồn tham khảo

Vue docs — Built-in directives

Câu 26Directives

`<component :is="...">` dùng để làm gì?

A.Khai báo component được phép dùng trong template
B.Tạo một component mới lúc chạy từ một chuỗi template
C.Render component được chọn động lúc chạy theo một giá trị
D.Chuyển một component thành web component chuẩn

Đáp án: C

Nguồn tham khảo

Vue docs — Built-in directives

Câu 27Performance

`defineAsyncComponent` mang lại lợi ích gì?

A.Cho phép component tự cập nhật mà không cần re-render cha
B.Cho phép component có setup là hàm bất đồng bộ
C.Tách component thành chunk riêng, chỉ tải khi thực sự render
D.Render component ở phía server thay vì client

Đáp án: C

Nguồn tham khảo

Vue docs — Performance

Câu 28Performance

Directive `v-memo` dùng để làm gì?

A.Lưu trạng thái của component khi bị ẩn đi
B.Cache dữ liệu trả về từ API trong bộ nhớ
C.Ghi nhớ kết quả của một hàm để không phải tính lại
D.Bỏ qua việc cập nhật một cây con khi các giá trị phụ thuộc không đổi

Đáp án: D

Nguồn tham khảo

Vue docs — Performance

Câu 29Pinia

Pinia store viết theo setup style khác option style thế nào?

A.Setup style dùng ref và computed như trong component
B.Option style nhanh hơn vì được tối ưu tốt hơn
C.Setup style không dùng được với devtools
D.Setup style không hỗ trợ getter tính toán

Đáp án: A

Nguồn tham khảo

Pinia docs — Core concepts

Câu 30Pinia

Một Pinia store gọi được store khác không?

A.Được — gọi hàm tạo store kia bên trong action hoặc getter
B.Chỉ được khi hai store cùng nằm trong một module
C.Không — store phải hoàn toàn độc lập với nhau
D.Được, nhưng phải khai báo quan hệ trong cấu hình

Đáp án: A

Nguồn tham khảo

Pinia docs — Core concepts

Câu 31Vue Router

Điều hướng từ `/user/1` sang `/user/2` không làm component chạy lại setup. Vì sao?

A.Router cache lại kết quả của lần điều hướng trước
B.Cùng component nên nó được tái dùng thay vì dựng lại
C.Tham số route không được coi là thay đổi thực sự
D.Setup chỉ chạy một lần cho toàn bộ ứng dụng

Đáp án: B

Nguồn tham khảo

Vue Router docs — Getting started

Câu 32Vue Router

Navigation guard trả về `false` khác trả về một object route thế nào?

A.Hai cách tương đương, chỉ khác cú pháp
B.Trả false huỷ điều hướng tại chỗ; trả object chuyển sang route đó
C.Trả false chỉ cảnh báo còn trả object mới thực sự chặn
D.Trả object chỉ hoạt động trong guard toàn cục

Đáp án: B

Nguồn tham khảo

Vue Router docs — Getting started

Câu 33SSR & Nuxt

Trong Nuxt, `useState` khác `ref` thông thường ở điểm nào?

A.Nó lưu giá trị vào bộ nhớ cục bộ của trình duyệt
B.Nó chia sẻ theo key và truyền được từ server sang client
C.Nó chỉ hoạt động ở phía client
D.Nó tự đồng bộ với một API backend

Đáp án: B

Nguồn tham khảo

Vue docs — Server-side rendering

Câu 34Vue Router

Trường `meta` của route dùng để làm gì?

A.Cấu hình cách route được cache trong bộ nhớ
B.Gắn dữ liệu tuỳ ý cho route, đọc được trong guard và component
C.Khai báo các thẻ meta HTML cho SEO của trang
D.Khai báo các tham số bắt buộc của route

Đáp án: B

Nguồn tham khảo

Vue Router docs — Getting started

Câu 35Vue Router

`scrollBehavior` trong Vue Router giải quyết vấn đề gì?

A.Quyết định vị trí cuộn sau mỗi lần điều hướng
B.Tối ưu hiệu năng khi cuộn qua danh sách dài
C.Tự tải thêm nội dung khi cuộn tới cuối trang
D.Đồng bộ vị trí cuộn giữa nhiều tab trình duyệt

Đáp án: A

Nguồn tham khảo

Vue Router docs — Getting started

Câu 36Pinia

Muốn tự động lưu state của Pinia vào localStorage nên làm thế nào?

A.Bật một tuỳ chọn trong cấu hình khi tạo store
B.Đặt state trực tiếp vào localStorage thay vì trong store
C.Dùng plugin của Pinia hoặc $subscribe để bắt mọi thay đổi
D.Gọi lưu trong từng action sau khi cập nhật state

Đáp án: C

Nguồn tham khảo

Pinia docs — Core concepts

Câu 37Pinia

Test một component dùng Pinia store cần chuẩn bị gì?

A.Thay store bằng một object giả tự viết
B.Tạo một instance Pinia mới cho mỗi test để state không lẫn nhau
C.Chạy test trong một trình duyệt thật thay vì môi trường giả lập
D.Khai báo store trong chính file test thay vì import

Đáp án: B

Nguồn tham khảo

Pinia docs — Core concepts

Câu 38Directives

`<Transition>` và `<TransitionGroup>` khác nhau ở điểm nào?

A.Loại sau xử lý danh sách và có thêm hiệu ứng di chuyển vị trí
B.Loại đầu dùng CSS còn loại sau dùng JavaScript
C.Loại sau chỉ hoạt động với v-for có khoá là chỉ số
D.Loại đầu chạy khi mount còn loại sau khi unmount

Đáp án: A

Nguồn tham khảo

Vue docs — Built-in directives

Câu 39Core Concepts

Scoped CSS trong SFC hoạt động bằng cách nào?

A.CSS chỉ được nạp khi component được render
B.Mỗi component được render trong shadow DOM riêng
C.Trình biên dịch thêm attribute duy nhất vào element và selector
D.CSS được đổi tên class thành chuỗi băm

Đáp án: C

Nguồn tham khảo

Vue docs — Creating an application

Câu 40Composition API

`defineModel()` (Vue 3.4+) thay thế cách viết nào?

A.Việc khai báo store cho state dùng chung
B.Việc dùng provide và inject giữa các cấp
C.Cặp prop modelValue và emit update:modelValue viết tay
D.Việc khai báo props bằng defineProps

Đáp án: C

Nguồn tham khảo

Vue docs — Composition API FAQ

Câu 41Core Concepts

Biến môi trường trong dự án Vite phải có tiền tố gì để đọc được từ client?

A.Không cần tiền tố; mọi biến đều đọc được
B.VITE_ — biến không có tiền tố này không vào bundle
C.PUBLIC_ theo quy ước chung của các công cụ build
D.NEXT_PUBLIC_ vì đây là quy ước chuẩn

Đáp án: B

Nguồn tham khảo

Vue docs — Creating an application

Câu 42Performance

Danh sách 10.000 dòng render chậm dù đã có `:key` đúng. Hướng xử lý?

A.Virtual scrolling — chỉ render các dòng đang trong viewport
B.Thêm v-memo cho từng dòng để bỏ qua cập nhật
C.Chuyển state sang shallowRef để giảm chi phí proxy
D.Dùng v-show thay v-if cho từng dòng

Đáp án: A

Nguồn tham khảo

Vue docs — Performance

Câu 43SSR & Nuxt

Component dùng `window` gây lỗi khi SSR. Cách xử lý trong Nuxt?

A.Thêm một kiểm tra kiểu cho biến đó trong TypeScript
B.Bọc trong <ClientOnly> hoặc chuyển vào hook client
C.Thay window bằng globalThis
D.Tắt SSR cho toàn bộ ứng dụng

Đáp án: B

Nguồn tham khảo

Vue docs — Server-side rendering

Câu 44Core Concepts

Test một composable riêng lẻ (không qua component) làm thế nào?

A.Phải chuyển composable thành một hàm thuần trước khi test
B.Composable không test đơn vị được, chỉ test qua component
C.Luôn phải mount một component vì composable cần instance
D.Gọi trực tiếp nếu không dùng lifecycle; nếu có thì bọc trong component tạm

Đáp án: D

Nguồn tham khảo

Vue docs — Creating an application

Câu 45Core Concepts

Vue Test Utils khuyến nghị test theo hướng nào?

A.Test bằng cách gọi trực tiếp các hàm trong setup
B.Test mọi method và computed của component
C.Test qua những gì người dùng thấy và làm, không qua state nội bộ
D.Chỉ test snapshot của HTML được render

Đáp án: C

Nguồn tham khảo

Vue docs — Creating an application

Câu 46Core Concepts

Auto-import component trong Nuxt hoặc qua plugin có đánh đổi gì?

A.Bớt dòng import, đổi lại khó lần nguồn gốc của một tên
B.Component được đăng ký toàn cục nên nằm hết trong bundle chính
C.Mất khả năng kiểm tra kiểu cho props
D.Bundle nhỏ hơn vì component được tải theo yêu cầu

Đáp án: A

Nguồn tham khảo

Vue docs — Creating an application

Câu 47Render & Migration

Khi nào nên dùng JSX/render function thay vì template trong Vue?

A.Khi cấu trúc phụ thuộc logic phức tạp mà template khó diễn đạt
B.Khi cần hiệu năng render tốt hơn template
C.Khi component có nhiều props cần kiểm tra kiểu
D.Khi component cần dùng slot có phạm vi

Đáp án: A

Nguồn tham khảo

Vue docs — Render functions

Câu 48Component Communication

`provide`/`inject` nên dùng thay props trong tình huống nào?

A.Khi dữ liệu phải đi qua nhiều cấp mà các cấp giữa không dùng tới
B.Khi dữ liệu cần được chia sẻ giữa các nhánh khác nhau của cây
C.Khi cần dữ liệu phản ứng thay vì giá trị tĩnh
D.Bất cứ khi nào cần truyền dữ liệu xuống component con

Đáp án: A

Nguồn tham khảo

Vue docs — Props

Câu 49Reactivity

Sau khi đổi một reactive value, đọc `element.offsetHeight` ngay lập tức cho giá trị cũ. Vì sao?

A.Element bị cache lại nên trả về thông tin cũ
B.Trình duyệt chưa kịp tính lại layout sau khi DOM đổi
C.Giá trị reactive chưa được cập nhật ngay khi gán
D.Vue gom các cập nhật và áp lên DOM ở microtask kế tiếp

Đáp án: D

Nguồn tham khảo

Vue docs — Reactivity in depth

Câu 50Performance

`<KeepAlive>` ảnh hưởng thế nào tới lifecycle của component bên trong?

A.Component bị đóng băng và không nhận cập nhật nữa
B.Component không bị unmount mà chuyển sang trạng thái deactivated
C.Component vẫn unmount nhưng state được lưu lại
D.Các hook vòng đời chạy như bình thường

Đáp án: B

Nguồn tham khảo

Vue docs — Performance

Câu 51Component Communication

`<Teleport>` render nội dung ở đâu và giữ gì?

A.Ra element khác trong DOM, giữ quan hệ component cha con
B.Ra một iframe riêng để cô lập hoàn toàn
C.Ra một component khác được chỉ định bằng tên
D.Ra shadow DOM của element đích

Đáp án: A

Nguồn tham khảo

Vue docs — Props

Câu 52Core Concepts

Vue plugin (`app.use()`) thường dùng để làm gì?

A.Đăng ký component toàn cục, directive và provide cấp app
B.Cấu hình quá trình build của ứng dụng
C.Thay đổi cách hệ thống reactivity hoạt động
D.Mở rộng cú pháp template bằng các thẻ mới

Đáp án: A

Nguồn tham khảo

Vue docs — Creating an application

Còn 18 câu Vue.js mức Nâng cao

Phần Nâng cao đi vào tình huống chuyên sâu và các bẫy kỹ thuật hay gặp, dành cho thành viên Pro.

Nâng cấp gói

Mức Cơ bản — 10 câu Vue.js

Vue khác React ở điểm nào là cốt lõi nhất khi viết giao diện?

Options API và Composition API khác nhau thế nào?

<script setup> khác setup() thông thường ở điểm nào?

Single File Component (SFC) là gì?

Trong template dưới đây, mỗi directive làm gì?

Khi nào chọn v-show thay vì v-if?

Các cách truyền dữ liệu giữa component trong Vue tương ứng với tình huống nào?

Thiết lập Vue Router cơ bản gồm những phần nào?

Pinia khác Vuex ở những điểm nào đáng kể?

Cần bật/tắt class CSS theo trạng thái component. Cú pháp nào của Vue phù hợp?

Mức Trung bình — 52 câu Vue.js

Vì sao :key trong v-for quan trọng, và vì sao không nên dùng chỉ số làm key?

v-model trên một component tự viết được biên dịch thành gì?

Hệ thống reactivity của Vue 3 hoạt động dựa trên cơ chế nào?

Phát biểu nào sau đây SAI về ref và reactive?

computed, watch và watchEffect nên dùng trong tình huống nào?

Composable là gì và hơn mixin ở điểm nào?

Trong Composition API, created và beforeCreate tương ứng với cái gì?

provide / inject dùng khi nào và cần lưu ý gì để giá trị vẫn reactive?

defineProps và defineEmits trong <script setup> có gì đặc biệt?

Phát biểu nào sau đây SAI về slot trong Vue?

Navigation guard nào phù hợp để chặn truy cập trang cần đăng nhập cho toàn bộ ứng dụng?

Khai báo route động kèm lazy loading trong Vue Router như thế nào?

Vì sao cần storeToRefs khi destructuring một Pinia store?

<KeepAlive> làm gì và ảnh hưởng thế nào tới lifecycle của component bên trong?

Vì sao đôi khi phải await nextTick() trước khi đọc DOM?

Destructuring một object reactive làm mất reactivity. Vì sao?

Trong <script setup>, ref cần .value nhưng trong template thì không. Vì sao?

watchEffect khác watch ở điểm nào?

useAttrs() và inheritAttrs: false dùng để làm gì?

Component dùng <script setup> mặc định phơi ra gì cho component cha qua template ref?

Scoped slot khác slot thường ở điểm nào?

Khai defineProps với kiểu TypeScript khác khai bằng object runtime thế nào?

Gọi onMounted() bên trong một callback bất đồng bộ không có tác dụng. Vì sao?

Modifier .lazy, .number, .trim của v-model làm gì?

Custom directive trong Vue 3 gồm những hook nào?

<component :is="..."> dùng để làm gì?

defineAsyncComponent mang lại lợi ích gì?

Directive v-memo dùng để làm gì?

Pinia store viết theo setup style khác option style thế nào?

Một Pinia store gọi được store khác không?

Điều hướng từ /user/1 sang /user/2 không làm component chạy lại setup. Vì sao?

Navigation guard trả về false khác trả về một object route thế nào?

Trong Nuxt, useState khác ref thông thường ở điểm nào?

Trường meta của route dùng để làm gì?

scrollBehavior trong Vue Router giải quyết vấn đề gì?

Muốn tự động lưu state của Pinia vào localStorage nên làm thế nào?

Test một component dùng Pinia store cần chuẩn bị gì?

<Transition> và <TransitionGroup> khác nhau ở điểm nào?

Scoped CSS trong SFC hoạt động bằng cách nào?

defineModel() (Vue 3.4+) thay thế cách viết nào?

Biến môi trường trong dự án Vite phải có tiền tố gì để đọc được từ client?

Danh sách 10.000 dòng render chậm dù đã có :key đúng. Hướng xử lý?

Component dùng window gây lỗi khi SSR. Cách xử lý trong Nuxt?

Test một composable riêng lẻ (không qua component) làm thế nào?

Vue Test Utils khuyến nghị test theo hướng nào?

Auto-import component trong Nuxt hoặc qua plugin có đánh đổi gì?

Khi nào nên dùng JSX/render function thay vì template trong Vue?

provide/inject nên dùng thay props trong tình huống nào?

Sau khi đổi một reactive value, đọc element.offsetHeight ngay lập tức cho giá trị cũ. Vì sao?

<KeepAlive> ảnh hưởng thế nào tới lifecycle của component bên trong?

<Teleport> render nội dung ở đâu và giữ gì?

Vue plugin (app.use()) thường dùng để làm gì?

Còn 18 câu Vue.js mức Nâng cao

Mức Cơ bản — 10 câu Vue.js

Vue khác React ở điểm nào là cốt lõi nhất khi viết giao diện?

Options API và Composition API khác nhau thế nào?

<script setup> khác setup() thông thường ở điểm nào?

Single File Component (SFC) là gì?

Trong template dưới đây, mỗi directive làm gì?

Khi nào chọn v-show thay vì v-if?

Các cách truyền dữ liệu giữa component trong Vue tương ứng với tình huống nào?

Thiết lập Vue Router cơ bản gồm những phần nào?

Pinia khác Vuex ở những điểm nào đáng kể?

Cần bật/tắt class CSS theo trạng thái component. Cú pháp nào của Vue phù hợp?

Mức Trung bình — 52 câu Vue.js

Vì sao :key trong v-for quan trọng, và vì sao không nên dùng chỉ số làm key?

v-model trên một component tự viết được biên dịch thành gì?

Hệ thống reactivity của Vue 3 hoạt động dựa trên cơ chế nào?

`<script setup>` khác `setup()` thông thường ở điểm nào?

Khi nào chọn `v-show` thay vì `v-if`?

Vì sao `:key` trong `v-for` quan trọng, và vì sao không nên dùng chỉ số làm key?

`v-model` trên một component tự viết được biên dịch thành gì?

Phát biểu nào sau đây SAI về `ref` và `reactive`?

`computed`, `watch` và `watchEffect` nên dùng trong tình huống nào?

Trong Composition API, `created` và `beforeCreate` tương ứng với cái gì?

`provide` / `inject` dùng khi nào và cần lưu ý gì để giá trị vẫn reactive?

`defineProps` và `defineEmits` trong `<script setup>` có gì đặc biệt?

Vì sao cần `storeToRefs` khi destructuring một Pinia store?

`<KeepAlive>` làm gì và ảnh hưởng thế nào tới lifecycle của component bên trong?

Vì sao đôi khi phải `await nextTick()` trước khi đọc DOM?

Destructuring một object `reactive` làm mất reactivity. Vì sao?

Trong `<script setup>`, `ref` cần `.value` nhưng trong template thì không. Vì sao?

`watchEffect` khác `watch` ở điểm nào?

`useAttrs()` và `inheritAttrs: false` dùng để làm gì?

Component dùng `<script setup>` mặc định phơi ra gì cho component cha qua template ref?

Khai `defineProps` với kiểu TypeScript khác khai bằng object runtime thế nào?

Gọi `onMounted()` bên trong một callback bất đồng bộ không có tác dụng. Vì sao?

Modifier `.lazy`, `.number`, `.trim` của `v-model` làm gì?

`<component :is="...">` dùng để làm gì?

`defineAsyncComponent` mang lại lợi ích gì?

Directive `v-memo` dùng để làm gì?

Điều hướng từ `/user/1` sang `/user/2` không làm component chạy lại setup. Vì sao?

Navigation guard trả về `false` khác trả về một object route thế nào?

Trong Nuxt, `useState` khác `ref` thông thường ở điểm nào?

Trường `meta` của route dùng để làm gì?

`scrollBehavior` trong Vue Router giải quyết vấn đề gì?

`<Transition>` và `<TransitionGroup>` khác nhau ở điểm nào?

`defineModel()` (Vue 3.4+) thay thế cách viết nào?

Danh sách 10.000 dòng render chậm dù đã có `:key` đúng. Hướng xử lý?

Component dùng `window` gây lỗi khi SSR. Cách xử lý trong Nuxt?

`provide`/`inject` nên dùng thay props trong tình huống nào?

Sau khi đổi một reactive value, đọc `element.offsetHeight` ngay lập tức cho giá trị cũ. Vì sao?

`<KeepAlive>` ảnh hưởng thế nào tới lifecycle của component bên trong?

`<Teleport>` render nội dung ở đâu và giữ gì?

Vue plugin (`app.use()`) thường dùng để làm gì?

`<script setup>` khác `setup()` thông thường ở điểm nào?

Khi nào chọn `v-show` thay vì `v-if`?

Vì sao `:key` trong `v-for` quan trọng, và vì sao không nên dùng chỉ số làm key?

`v-model` trên một component tự viết được biên dịch thành gì?

Phát biểu nào sau đây SAI về `ref` và `reactive`?

`computed`, `watch` và `watchEffect` nên dùng trong tình huống nào?

Trong Composition API, `created` và `beforeCreate` tương ứng với cái gì?

`provide` / `inject` dùng khi nào và cần lưu ý gì để giá trị vẫn reactive?

`defineProps` và `defineEmits` trong `<script setup>` có gì đặc biệt?

Vì sao cần `storeToRefs` khi destructuring một Pinia store?

`<KeepAlive>` làm gì và ảnh hưởng thế nào tới lifecycle của component bên trong?

Vì sao đôi khi phải `await nextTick()` trước khi đọc DOM?

Destructuring một object `reactive` làm mất reactivity. Vì sao?

Trong `<script setup>`, `ref` cần `.value` nhưng trong template thì không. Vì sao?

`watchEffect` khác `watch` ở điểm nào?

`useAttrs()` và `inheritAttrs: false` dùng để làm gì?

Component dùng `<script setup>` mặc định phơi ra gì cho component cha qua template ref?

Khai `defineProps` với kiểu TypeScript khác khai bằng object runtime thế nào?

Gọi `onMounted()` bên trong một callback bất đồng bộ không có tác dụng. Vì sao?

Modifier `.lazy`, `.number`, `.trim` của `v-model` làm gì?

`<component :is="...">` dùng để làm gì?

`defineAsyncComponent` mang lại lợi ích gì?

Directive `v-memo` dùng để làm gì?

Điều hướng từ `/user/1` sang `/user/2` không làm component chạy lại setup. Vì sao?

Navigation guard trả về `false` khác trả về một object route thế nào?

Trong Nuxt, `useState` khác `ref` thông thường ở điểm nào?

Trường `meta` của route dùng để làm gì?

`scrollBehavior` trong Vue Router giải quyết vấn đề gì?

`<Transition>` và `<TransitionGroup>` khác nhau ở điểm nào?

`defineModel()` (Vue 3.4+) thay thế cách viết nào?

Danh sách 10.000 dòng render chậm dù đã có `:key` đúng. Hướng xử lý?

Component dùng `window` gây lỗi khi SSR. Cách xử lý trong Nuxt?

`provide`/`inject` nên dùng thay props trong tình huống nào?

Sau khi đổi một reactive value, đọc `element.offsetHeight` ngay lập tức cho giá trị cũ. Vì sao?

`<KeepAlive>` ảnh hưởng thế nào tới lifecycle của component bên trong?

`<Teleport>` render nội dung ở đâu và giữ gì?

Vue plugin (`app.use()`) thường dùng để làm gì?