All 62 Vue.js quiz questions below come with a short explanation, visible right on the page — no sign-in needed. They're grouped by beginner and intermediate levels and 10 subtopics, so you can revise one part at a time. Choose Try Vue.js quiz above to take a scored run and review the questions you got wrong.
What is the core difference between Vue and React when writing UI?
A.Vue only works with plain JavaScript and does not support TypeScript at all
B.Vue has no virtual DOM at all while React does
C.Vue uses templates and directives and tracks dependencies for you; React uses JSX
D.Vue is a backend framework while React is a frontend library
Answer: C
Vue describes UI with templates plus directives and has a built-in reactivity system that tracks dependencies: changing state updates the related view automatically. React describes UI with JSX and re-renders components when state changes, leaving optimization up to the developer. Vue also ships an official router and store (Vue Router, Pinia), while React leaves those choices to the team.
How do the Options API and the Composition API differ?
A.The Composition API is many times faster because it does not use the reactivity system
B.The Options API organizes by kind; the Composition API organizes by concern
C.The Options API was removed in Vue 3 so old code must be rewritten
D.The Composition API only works when writing TypeScript
Answer: B
The Options API splits code by kind: data, computed, methods, watch. The Composition API groups by concern: everything related to one concern lives together in setup and can be extracted into reusable composables. For small components the two are equivalent; for large components with many concerns the Composition API avoids jumping between blocks.
A.Imported components must still be listed in a components option
B.It removes the reactivity system entirely — plain variables update the view
C.The defineProps/defineEmits macros must be imported from vue first
D.Top-level declarations are usable in the template automatically, with no return
Answer: D
<script setup> is compile-time syntax sugar for setup(): top-level variables are usable in the template directly (no return needed), imported components register themselves, and the defineProps/defineEmits/defineExpose macros give stricter typing. Reactivity is unchanged — you still need ref/reactive for a value to be tracked.
A.A format that runs directly in the browser with no build step
B.A JavaScript file containing every component of the application
C.A .vue file containing three blocks: <template>, <script> and <style>
D.A style that only works with Vue 2's Options API
Answer: C
An SFC is a .vue file bundling the three parts of a component: <template> (structure), <script> (logic) and <style> (appearance). Build tools like Vite compile it into a JavaScript module. Add scoped to <style> so the CSS applies only within the component and does not leak out.
C.v-model only reads the value from state into the input and never writes back
D.: and @ are JSX-specific syntax that Vue does not support
Answer: B
v-bind (shorthand :) assigns a JavaScript value to an attribute or prop. v-on (shorthand @) listens for events. v-model is two-way binding for inputs and components. v-if/v-else render conditionally, while v-show only toggles display. v-for iterates a list and requires :key.
A.When you want the element to disappear from the DOM tree entirely
B.When you need to pair it with v-else in the same block
C.When the element is almost never shown — use v-show to avoid the cost
D.When the element toggles constantly — v-show only flips display, so toggling is cheap
Answer: D
v-if actually creates and destroys the element and its child components, so the cost is paid on every toggle; it is also lazy — if the condition is false initially nothing renders. v-show always renders upfront and only toggles display, making toggling very cheap but adding initial setup cost. Use v-show for frequent toggling (tabs, tooltips); use v-if for rarely shown or heavy content.
Which data-passing mechanism fits which situation in Vue?
A.Parent→child props, child→parent emit, cross-level provide/inject, a shared store
B.provide/inject is for sending events from child back up to parent
C.A child can assign directly to a prop to update the parent's data
D.Every case should use a global store for consistency
Answer: A
Props pass data from parent to child and are read-only on the child side. Emit sends events from child to parent (emit("update", payload)), which the parent listens for with @update. provide/inject passes data down several levels without prop drilling. A store (Pinia) fits state shared across many branches. Additionally, defineExpose plus a template ref lets a parent call a child's methods when truly needed.
A.createRouter with routes, app.use(router), <router-view>, <router-link>
B.In code you can only navigate with window.location
C.Navigate with <a href> to keep the browser's standard navigation behaviour
D.Just put component files in a pages directory and Vue generates the routes
Answer: A
Create the router with createRouter({ history: createWebHistory(), routes }), install it with app.use(router), place <router-view> where pages should render, and navigate with <router-link to="/users/1"> in templates or router.push() in code. Read params via useRoute().params; navigate via useRouter().
A.Pinia can only store strings, so you must serialize things yourself
B.Pinia does not use Vue's reactivity and reimplements its own
C.Pinia requires every state change to go through a synchronous mutation
D.No mutations, flat stores instead of nested modules, and better TypeScript inference
Answer: D
Pinia is Vue's current official state library. Compared to Vuex: it drops the mutation concept (state is changed directly in actions), each store is an independent unit rather than a nested module, the API fits the Composition API, and TypeScript infers types without extra declarations. It still offers devtools and SSR support.
You need to toggle a CSS class based on component state. Which Vue syntax fits?
A.Manual string concatenation in :class is the only way
B.Use document.querySelector in onMounted to add the class
C.:class accepting an object { class-name: condition }, or an array to combine sources
D.You must use v-if to render two versions of the element with entirely different classes
Answer: C
:class="{ active: isActive, disabled: isDisabled }" — the class is added when the corresponding value is truthy. An array combines multiple sources: :class="[baseClass, { active: isActive }]". Vue automatically merges with the static class already written on the element.
Why does :key matter in v-for, and why is the index a poor key?
A.The key is how Vue sorts the list in ascending order
B.The key only silences a console warning and does not affect behaviour
C.The index is always better because it is a unique integer across the list
D.The key is the item's identity; indices shift on insert/remove so Vue reuses the wrong node
Answer: D
:key gives Vue a stable identity to match old nodes with new items, so it only adds/removes/moves exactly what's needed. Using the index as key means that when inserting or removing in the middle, the identity of the items after it shifts by one: Vue keeps the old node for the new item, so local state (input value, checkbox, open/closed state) sticks to a different item. Use a stable id from the data.
A.A modelValue prop passed down plus an update:modelValue event emitted up
B.A shared reference so parent and child point at one variable, changed from either side
C.A direct document.querySelector call to read the input's value
D.An implicit global store Vue creates for each component
Answer: A
v-model on a component is syntactic sugar for the modelValue prop and the update:modelValue event. The child receives the value through the prop and calls emit("update:modelValue", newValue) when it wants to change it. For multiple v-models on the same component, name them: v-model:title maps to the title prop and the update:title event. Since Vue 3.4 there's the defineModel() macro for a shorter form.
What mechanism powers the Vue 3 reactivity system?
A.Deep-comparing the whole state after every event to find what changed
B.Object.defineProperty per property, exactly like Vue 2
C.A Proxy around the object: reads track dependencies, writes trigger effects
D.Periodic polling to check whether values have changed
Answer: C
Vue 3 wraps objects with Proxy. When an effect (render function, computed, watchEffect) reads a property, Vue records the dependency; when the property is written, Vue re-runs exactly the dependent effects. Compared to Vue 2's Object.defineProperty, Proxy catches adding/deleting properties and index-based array operations too, so Vue.set is no longer needed.
const count = ref(0)
count.value++
const state = reactive({ user: { name: 'An' } })
const { user } = state // still reactive (object)const { name } = state.user// LOSES reactivity (primitive)
A.In the template you must still write .value every time you read a ref
B.Destructuring a primitive out of a reactive object loses reactivity unless you use toRefs
C.reactive only accepts objects/arrays/Map/Set, not numbers or strings
D.ref works for both primitives and objects, accessed through .value in the script
Answer: A
ref wraps any value and is accessed with .value in script (the template auto-unwraps at the top level). reactive only accepts objects and returns a deep proxy, with no .value needed. The easy trap: reassigning a whole reactive object (state = {...}) breaks the connection, and destructuring primitive fields also loses reactivity — use toRefs() when you need to pull them out.
When should you reach for computed, watch or watchEffect?
A.computed and watch are identical, pick whichever
B.watchEffect runs only once on mount and never again
C.computed for derived values, watch for a specific source, watchEffect for auto-tracking
D.API calls should go in a computed so the result is cached
Answer: C
computed declares a derived value: cached, recomputed only when dependencies change, must be pure and synchronous. watch tracks a specific source to run a side effect, gives both old and new values, and by default doesn't run immediately (enable with immediate: true). watchEffect runs immediately and automatically tracks everything read inside — concise when there are many dependencies but harder to see what triggers it.
A.A function packaging stateful logic, with each variable's origin clear at the call site
B.A composable is a component without a template
C.Mixins are safer because Vue warns on every duplicate property name
D.A composable can only hold pure functions, never state
Answer: A
A composable is a function that uses the Composition API to package a piece of logic with state (useCounter, useFetch, useLocalStorage) and returns what the component needs. Unlike a mixin: everything comes from the call site explicitly (const { count } = useCounter()), it can be renamed on collision, it takes arguments, and it can be called multiple times for independent instances.
In the Composition API, what replaces created and beforeCreate?
A.There is no equivalent; you must go back to the Options API for initialization code
B.onMounted — because mounting happens right after created
C.The body of setup itself, which runs at the equivalent moment, so there is no separate hook
D.onCreated and onBeforeCreate — just renamed with an on prefix
Answer: C
The body of setup runs exactly at the beforeCreate/created stage, so those two hooks have no on* version. Other hooks add an on prefix: onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, plus onErrorCaptured. They must be called synchronously at the top level of setup so Vue knows which component to attach them to.
When do you use provide / inject, and what keeps the value reactive?
javascript
// component chaconst theme = ref('dark')
provide('theme', theme) // pass the whole ref// component cháuconst theme = inject('theme') // theme.value reflects changes from the parent
A.It is for sending events from child up to parent instead of emitting
B.Passing down many levels; provide the ref/reactive itself rather than its .value
C.An injected value always stays reactive, even when a plain number is provided
D.It only works between a direct parent and child, not across levels
Answer: B
provide/inject solves passing data deep down without forwarding props through every layer — good for theme, config, or the internal API of a compound component. For the receiver to see changes, provide the ref/reactive itself, not .value. Put the update function in the same place and let children call that function, rather than letting them write directly.
A.They are compile-time macros — no import needed, and they can be declared with TypeScript types
B.defineProps returns an object you can reassign to update the prop values
C.Both must be declared even when the component takes no props and emits no events
D.They are runtime functions imported from vue, callable anywhere in the file
Answer: A
defineProps/defineEmits are compiler macros: no import, only usable at the top level of <script setup>, and turned into real props/emits declarations at build time. TypeScript type declarations give strict inference for both the receiving side (props) and the emitting side (event payload). Props are always readonly; default values are set via withDefaults or the destructure-with-defaults syntax in recent Vue versions.
A.A scoped slot lets the child pass data back out to the content the parent wrote
B.Slot content is compiled in the child's scope so it can read the child's internal variables
C.Slots let a parent pass a whole piece of template into a child rather than only data through props
D.Named slots (<template #header>) let you split a component into several content regions
Answer: B
Slots let a parent pass markup into a child. The unnamed <slot> is the default slot, and content written inside the <slot> tag is fallback content. Named slots split it into regions (#header, #footer). Scoped slots let the child expose data (<slot :item="item"> → #default="{ item }"). Slot content is always compiled in the parent's scope.
A.router.beforeEach — a global guard running before every navigation
B.No guard is needed, just hide the link in the navigation menu
C.beforeRouteLeave declared in each component
D.afterEach — since it runs afterwards, the route is certainly valid by then
Answer: A
Use router.beforeEach for centralized checks: read to.meta.requiresAuth, and if not logged in return the login route with redirect. There's also beforeEnter for a specific route, and in-component hooks: beforeRouteEnter (no this yet), beforeRouteUpdate, beforeRouteLeave (warn when leaving a half-filled form). Guards are only a UX layer — real authorization still has to live in the backend.
A.Going from /users/1 to /users/2 always recreates the component so nothing extra is needed
B.A dynamic :id parameter, lazy loading with a function returning import(), and props: true to receive it as a prop
C.A dynamic parameter can only be read through window.location.pathname
D.You must import the component statically and set a lazy: true property
Answer: B
Declare path: "/users/:id" and set component: () => import("@/views/UserDetail.vue") so the bundler splits it into its own chunk, loaded only when the route is entered. props: true turns params into props, making the component easier to test and independent of the router. Note: navigating between two ids on the same route reuses the component — you must watch the params or put a :key on <router-view> if you need a reload.
Why do you need storeToRefs when destructuring a Pinia store?
javascript
const store = useUserStore()
const { name, isAdmin } = store // LOSES reactivityconst { name, isAdmin } = storeToRefs(store) // keeps reactivityconst { login } = store // actions can be destructured directly
A.Because storeToRefs creates a separate copy of the store per component
B.Because Pinia stores state as JSON strings so a conversion is needed on every read
C.Because actions also lose reactivity without storeToRefs
D.Destructuring directly breaks the link; storeToRefs returns refs that keep updating
Answer: D
A Pinia store is a reactive object. Destructuring directly pulls out the value at that moment for state and getters, so they no longer update afterwards. storeToRefs(store) wraps each field in a ref pointing back to the same store, keeping the link. Actions are functions, so destructuring them directly still works.
What does <KeepAlive> do, and how does it affect the lifecycle of the component inside?
A.It keeps the component in the DOM by setting display: none
B.It keeps the instance alive while hidden so state is preserved, with onActivated hooks
C.It only caches the API data the component loaded so it need not fetch again
D.It prevents the inner component from re-rendering under any circumstances
Answer: B
<KeepAlive> keeps the component instance in memory when it is navigated away from, so state, scroll position and already-loaded data survive the return. The component inside doesn't re-run onMounted/onUnmounted; it uses onActivated/onDeactivated instead. There are include, exclude and max to limit how many instances are kept.
Why do you sometimes need await nextTick() before reading the DOM?
javascript
items.value.push(newItem)
// the new element is not in the DOM yetawaitnextTick()
// now the real height can be measured
list.value.scrollTop = list.value.scrollHeight
A.nextTick makes Vue skip the queue and update the DOM immediately
B.Because ref updates slowly so you must wait for the assignment to finish
C.Because the browser needs time to run CSS transitions
D.Vue batches changes and updates the DOM on the next tick; nextTick waits for that
Answer: D
Vue doesn't update the DOM the moment state changes; it batches changes and renders once in the next microtask — so mutating state several times in a row costs only one render. Because of that, right after changing state the DOM is still the old state. await nextTick() waits until after that update pass, when you can measure sizes, scroll to the bottom, or focus an element that just appeared.
Destructuring a reactive object loses reactivity. Why?
A.Destructuring pulls out primitive values, detaching them from the tracking proxy
B.Destructuring creates a deep copy of the whole object
C.Vue only tracks first-level properties of an object
D.The object is frozen after being destructured
Answer: A
Because destructuring extracts the value at that moment, no longer going through the tracking proxy. The proxy only intercepts property reads on itself — a detached variable has no path for the system to know who is reading it.
C.The template uses a different reactivity system than the script
D.Templates can only read values, not write them
Answer: B
The template compiler auto-unwraps references at the top level. This only applies to references at that level — a reference inside an array or inside an object still must be accessed explicitly in the template.
B.It collects its dependencies automatically and runs immediately the first time
C.It receives the old value while the other does not
D.It runs asynchronously while the other runs synchronously
Answer: B
It automatically collects every dependency read in the function body and runs immediately on the first call. The other one requires explicitly naming the source to watch, but gives you the old value in return and doesn't run by default until the source changes.
B.Controlling where undeclared attributes are attached
C.Preventing the component from receiving any attributes from outside
D.Declaring the required props a component must receive
Answer: B
They control where attributes not declared as props get attached. By default they fall through to the root element, but a form input component with a wrapper often needs them on the inner input tag.
What does a <script setup> component expose to a parent through a template ref by default?
A.Only functions, not data
B.Every variable declared in the script
C.Only variables declared with ref
D.Nothing at all — you must declare it with defineExpose
Answer: D
Nothing. The setup syntax is closed by default — for a parent to call a method or read a value, you must expose it explicitly with the corresponding macro.
How does a scoped slot differ from an ordinary slot?
A.It can only receive plain text content
B.It has its own CSS scope separate from the parent's
C.The child passes data back up into the slot content
D.It only renders when the child decides to allow it
Answer: C
The child component passes data back up into the projected content. That way a list component handles data loading and pagination, while the consumer decides how to render each row using that row's own data.
How does declaring defineProps with a TypeScript type differ from a runtime object?
A.The object form gives compile-time checking while the type form does not
B.The type form only works with the Options API
C.The type gives compile-time checking
D.The two are entirely equivalent after compilation
Answer: C
A type-based declaration mainly serves compile-time checking; the compiler tries to generate a runtime declaration from the type but does not fully succeed for every complex type. An object declaration gives runtime validation plus default values directly — with the type form, defaults need a separate macro.
Calling onMounted() inside an async callback has no effect. Why?
A.The async callback runs after the component has already mounted
B.The hook only runs once so the second call is ignored
C.Hooks must be registered synchronously in setup so they attach to the right instance
D.The hook cannot be used with the Composition API
Answer: C
Because hooks must be registered synchronously during setup so Vue knows which instance to attach them to. After the first await, the instance setup context no longer exists.
B.Hooks with exactly the same names as Vue 2 for compatibility
C.Hooks whose names the author chooses freely
D.A single function that runs when the element is created
Answer: A
Hooks named after the element lifecycle: before mount, mounted, before update, updated, before unmount, and unmounted. The names were renamed in Vue 3 to match the component lifecycle, so old code needs updating.
A.Declaring which components may be used in the template
B.Creating a new component at runtime from a template string
C.Rendering a component chosen dynamically at runtime from a value
D.Converting a component into a standard web component
Answer: C
It renders a component chosen at runtime from a value — a component object or the name of a registered component. That lets a config page render the right input type from a description object instead of a long chain of conditionals.
A.It lets a component update without re-rendering its parent
B.It allows a component's setup to be an async function
C.It splits the component into its own chunk, loaded only when actually rendered
D.It renders the component on the server instead of the client
Answer: C
Splits the component into a separate chunk, loaded only when it is actually rendered. A heavy dialog that is rarely opened, or a chart library used on just one tab — they should not be in the bundle downloaded on first page load.
A.Preserving a component's state while it is hidden
B.Caching data returned from an API in memory
C.Memoizing a function's result so it need not be recomputed
D.Skip subtree update when dependencies are unchanged
Answer: D
Skips updating a subtree when the values in the dependency array are unchanged. It is only worth using for very large lists — with small lists, the comparison cost outweighs the savings.
How does a setup-style Pinia store differ from an option-style one?
A.The setup style uses refs and computeds just as in a component
B.The option style is faster because it is better optimized
C.The setup style does not work with devtools
D.The setup style does not support computed getters
Answer: A
The setup style uses the exact component primitives: refs for state, computed for derived values, plain functions for actions. That way you can reuse existing composables right inside the store.
A.Yes — call the other store's factory function inside an action or getter
B.Only when both stores live in the same module
C.No — stores must be entirely independent of one another
D.Yes, but the relationship must be declared in the configuration
Answer: A
Yes — call the other store's setup function right inside an action or getter. In an option store, call the other store inside an action or getter. In a setup store, you can call useOtherStore() right in the store's setup function. The library has no concept of nested modules, so stores are flat and reference each other freely.
Navigating from /user/1 to /user/2 does not rerun setup. Why?
A.The router caches the result of the previous navigation
B.It is the same component so it is reused instead of being recreated
C.Route params are not treated as a real change
D.Setup runs only once for the whole application
Answer: B
Because it is the same component, the router reuses it instead of unmounting and remounting. The fix is to watch the route param and react when it changes, or attach a key to the route's rendered tag to force a remount.
How does a navigation guard returning false differ from returning a route object?
A.The two are equivalent, differing only in syntax
B.Returning false cancels the navigation in place; returning an object navigates there instead
C.Returning false only warns while returning an object actually blocks
D.Returning an object only works in a global guard
Answer: B
Returning a falsy value cancels the navigation and stays on the current page. Returning a route object redirects to that route. Cancelling silently means the user clicks and nothing happens, with no idea why.
In Nuxt, how does useState differ from a plain ref?
A.It stores the value in the browser's local storage
B.It is keyed across server-client
C.It only works on the client
D.It syncs itself with a backend API
Answer: B
It shares state by key and can be passed from server to client during rendering. A variable declared at module level is shared across every request on the server — causing data leakage between different users.
B.Attaching arbitrary data to a route, readable in guards and components
C.Declaring the page's HTML meta tags for SEO
D.Declaring the route's required parameters
Answer: B
Attaches arbitrary data to a route, readable in guards and in the component. That lets a global guard check a flag in it — instead of matching a hardcoded list of paths that must be edited every time a page is added.
What problem does scrollBehavior in Vue Router solve?
A.Deciding the scroll position after each navigation
B.Optimizing performance while scrolling long lists
C.Loading more content automatically when scrolling to the bottom
D.Syncing the scroll position across browser tabs
Answer: A
It decides the scroll position after each navigation. Without it, switching pages keeps the old scroll position — the user clicks into a new page and finds themselves in the middle of the content.
How should Pinia state be persisted to localStorage automatically?
A.Enable an option in the configuration when creating the store
B.Put the state directly into localStorage instead of the store
C.Use a Pinia plugin or $subscribe to catch every change
D.Call the save inside each action after updating the state
Answer: C
Use a plugin — there are libraries available for this — or a method that subscribes to store changes. The plugin applies to every store at once, instead of repeating the persistence logic in each action.
What preparation does testing a component using a Pinia store need?
A.Replace the store with a hand-written fake object
B.Create a fresh Pinia instance per test so state does not bleed between them
C.Run the tests in a real browser instead of a simulated environment
D.Declare the store inside the test file rather than importing it
Answer: B
Create a fresh instance of the library for each test and install it into the app under test. Stores are shared objects, so reusing them across tests leaks state between them and makes results depend on execution order.
A.The latter handles lists and adds a move transition for repositioning
B.The former uses CSS while the latter uses JavaScript
C.The latter only works with v-for keyed by index
D.The former runs on mount while the latter runs on unmount
Answer: A
The first wraps a single element and handles enter/leave effects. The second wraps a list, enabling effects for each element added or removed, and adds a special class for position movement when the list reorders.
A.The CSS is only loaded when the component renders
B.Each component is rendered in its own shadow DOM
C.The compiler adds a unique attribute to the element and to the selector
D.The CSS class names are renamed to hashes
Answer: C
The compiler adds a unique attribute to the component's elements and to the corresponding CSS selectors. So the parent component's styles don't leak into the child component.
C.The hand-written modelValue prop plus update:modelValue emit pair
D.Declaring props with defineProps
Answer: C
The prop and emitted-event pair following the naming convention that previously had to be written by hand. It returns a writable ref, and the event is emitted automatically when you write to it.
What prefix must an environment variable have to be readable from the client in a Vite project?
A.No prefix is needed; every variable is readable
B.VITE_ — a variable without that prefix never enters the bundle
C.PUBLIC_, by common build-tool convention
D.NEXT_PUBLIC_ because that is the standard convention
Answer: B
This tool's own prefix. Variables without that prefix are not included in the bundle sent to the browser — a deliberate safeguard so secrets in the .env file aren't accidentally exposed.
A 10,000-row list renders slowly despite correct keys. What is the approach?
A.Virtual scrolling — render only the rows currently in the viewport
B.Add v-memo to each row to skip updates
C.Move the state to shallowRef to cut proxy overhead
D.Use v-show instead of v-if per row
Answer: A
Virtual scrolling: only render the rows currently in the viewport plus a small buffer at both ends. The root problem is the number of real DOM elements — correct keys only help updates, they don't reduce the number of elements that must be created.
A component using window breaks under SSR. How is it handled in Nuxt?
A.Add a type check for that variable in TypeScript
B.Wrap it in <ClientOnly> or move it into a client-side hook
C.Replace window with globalThis
D.Disable SSR for the whole application
Answer: B
Wrap that part in a client-only tag, or move the access into a hook that only runs after hydration. On the server there is no window object, so any direct access throws during render.
How do you test a composable in isolation, without a component?
A.The composable must be converted into a pure function before testing
B.Composables cannot be unit tested, only tested through a component
C.You must always mount a component because a composable needs an instance
D.Call it directly when it uses no lifecycle hooks; wrap it in a temporary component when it does
Answer: D
Call it directly if it only uses reactive primitives. If it registers lifecycle hooks or receives values from ancestors, wrap it in a stub component, because those hooks need an instance to attach to.
What testing approach does Vue Test Utils recommend?
A.Test by calling the functions in setup directly
B.Test every method and computed of the component
C.Test user behavior, not internal state
D.Only snapshot-test the rendered HTML
Answer: C
Test through what the user sees and does: rendered content, reactions to clicks, emitted data. Checking internal state breaks the test on refactors even when behavior hasn't changed.
What is the trade-off of component auto-import in Nuxt or through a plugin?
A.Fewer import lines, at the cost of not being able to trace where a name came from
B.Components are registered globally so they all land in the main bundle
C.It loses type checking for props
D.A smaller bundle because components are loaded on demand
Answer: A
Fewer repeated import lines, in exchange for harder to trace the origin of a name when reading code. A newcomer sees a component in the template with no clue where it's defined.
When should JSX or a render function be used instead of a template in Vue?
A.When the structure depends on complex logic that a template expresses awkwardly
B.When you need better rendering performance than a template
C.When the component has many props needing type checks
D.When the component needs scoped slots
Answer: A
When the structure depends on complex logic that's hard to express in a template — for example a heading component that picks a tag by level, or a wrapper component that transforms its children. Templates are better optimized thanks to static analysis, so only switch when truly needed.
When should provide/inject be used instead of props?
A.When the data must cross several levels that the intermediate ones never use
B.When the data must be shared between different branches of the tree
C.When you need reactive data instead of a static value
D.Whenever you need to pass data down to a child
Answer: A
When data has to travel through many levels that the intermediate ones don't use — UI theme, locale config, or shared state within a related group of components like a table and its rows.
After changing a reactive value, reading element.offsetHeight immediately gives the old value. Why?
A.The element is cached so it returns stale information
B.The browser has not recalculated layout yet after the DOM changed
C.The reactive value is not updated immediately on assignment
D.Vue batches the updates and applies them to the DOM on the next microtask
Answer: D
Vue batches updates and applies them to the DOM on the next microtask tick, not immediately when the value changes. Wait for that update tick with the corresponding function before reading the DOM.
How does <KeepAlive> affect the lifecycle of the component inside?
A.The component is frozen and receives no more updates
B.The component is not unmounted but moves into a deactivated state
C.The component still unmounts but its state is saved
D.The lifecycle hooks run as usual
Answer: B
The component is not unmounted but goes into an inactive state, with two dedicated hooks for reactivation and deactivation. So the unmount cleanup hook doesn't run — cleanup must move to the deactivated hook.
Where does <Teleport> render content, and what does it preserve?
A.Into a different DOM element, while preserving the parent-child component relationship
B.Into its own iframe for complete isolation
C.Into another component named explicitly
D.Into the target element's shadow DOM
Answer: A
To a different element in the DOM — usually the document body tag — while preserving the parent-child component relationship. That way a dialog escapes the parent's CSS constraints yet still receives props and emits events normally.
What is a Vue plugin (app.use()) typically used for?
A.Registering global components and directives, and providing at the app level
B.Configuring the application's build process
C.Changing how the reactivity system works
D.Extending the template syntax with new tags
Answer: A
Registering things at the app level: global components, directives, global properties, and values provided to the whole tree. Routers and state libraries are installed this way.
