Vue Cards Practice Exam — LearnCoachAssist

Question 1 Vue Cards

What are the six core Vue transition classes?

A composable is a reusable function that packages reactive state and logic for use across components. Use watch() for side effects like API calls, persistence, or logging rather than value derivation. v-enter-from, v-enter-active, v-enter-to, v-leave-from, v-leave-active, and v-leave-to. It caches inactive dynamic components so their state is preserved when the user returns.

Question 2 Vue Cards

What is lazy loading a route?

It loads route components only when needed, shrinking the initial bundle size. It explicitly exposes selected methods or refs from a <script setup> component to a parent using template refs. They are useful for highly dynamic output, headless UI libraries, and advanced composition patterns. It lets related logic live together, improves reusability, and scales more cleanly in large components.

Question 3 Vue Cards

Why is Pinia preferred over ad hoc global state?

They are useful for highly dynamic output, headless UI libraries, and advanced composition patterns. It improves TypeScript inference for props, emits, computed values, and component options. It gives structure, tooling, traceability, and cleaner testing for shared state. It is a runtime+compiler API that turns a template string into a render function at runtime.

Question 4 Vue Cards

How do you register a component globally?

Unstable keys can cause DOM reuse bugs, broken form state, and flickering transitions. Call app.component('MyName', MyComponent) during app setup. It waits for the leaving element to finish its transition before inserting the entering element. You can lose reactivity unless you convert properties with helpers like toRefs().

Question 5 Vue Cards

What is hydration in Vue SSR?

Read the generated modelModifiers prop and adjust behavior based on the modifier flags. A Pinia store is a centralized reactive module for app-level state, actions, and derived values. Route params are part of the URL path and usually identify a resource, while query params modify filtering, sorting, or optional state. Hydration attaches Vue's reactivity and event listeners to server-rendered HTML on the client.

Question 6 Vue Cards

Why should keys be stable and unique?

Unstable keys can cause DOM reuse bugs, broken form state, and flickering transitions. It gives structure, tooling, traceability, and cleaner testing for shared state. It shares values deeply through the component tree without prop drilling. Avoid unnecessary reactive work, use stable keys, memoize expensive derivations, and virtualize very large lists.

Question 7 Vue Cards

How do you validate emitted events?

Use the emits option with validation functions keyed by event name. Debug hooks that tell you which reactive dependency was tracked or which one caused a re-render. It can emit fallback and resolve-related lifecycle events, which help coordinate async loading states. It improves TypeScript inference for props, emits, computed values, and component options.

Question 8 Vue Cards

What is `reactive()` best for?

Keys help Vue preserve element identity correctly during updates, moves, and list diffing. A composable is a reusable function that packages reactive state and logic for use across components. A reactive effect that runs immediately and automatically tracks any dependencies used during execution. It wraps objects so their properties are tracked reactively without using .value.

Question 9 Vue Cards

What is `defineProps()` in `<script setup>`?

Route params are part of the URL path and usually identify a resource, while query params modify filtering, sorting, or optional state. A cached reactive value derived from other reactive sources that recomputes only when dependencies change. A compiler macro that declares component props with clean syntax inside single-file components. A helper type that lets you define complex prop types like arrays of objects or discriminated unions in the Options API.

Question 10 Vue Cards

What is a composable in Vue 3?

It explicitly exposes selected methods or refs from a <script setup> component to a parent using template refs. A composable is a reusable function that packages reactive state and logic for use across components. It can emit fallback and resolve-related lifecycle events, which help coordinate async loading states. Debug hooks that tell you which reactive dependency was tracked or which one caused a re-render.

Question 11 Vue Cards

What causes hydration mismatch errors?

A JavaScript function that returns VNodes directly instead of using a template. Use v-slot="{ item, index }" or the shorthand #default="{ item, index }" on the parent side. It can emit fallback and resolve-related lifecycle events, which help coordinate async loading states. Differences between server and client output, often from random values, time-based content, or browser-only state.

Question 12 Vue Cards

When are render functions helpful?

They are useful for highly dynamic output, headless UI libraries, and advanced composition patterns. It reduces prop noise but can make data flow less explicit if overused. It is a runtime+compiler API that turns a template string into a render function at runtime. It renders a component's DOM somewhere else in the document, which is ideal for modals, toasts, and overlays.

Question 13 Vue Cards

Why is the Composition API useful?

It creates a reactive object where only the top-level properties are tracked; nested objects stay non-reactive unless wrapped separately. Keys help Vue preserve element identity correctly during updates, moves, and list diffing. Unstable keys can cause DOM reuse bugs, broken form state, and flickering transitions. It lets related logic live together, improves reusability, and scales more cleanly in large components.

Question 14 Vue Cards

What is the difference between `v-show` and `v-if`?

It shares values deeply through the component tree without prop drilling. It caches inactive dynamic components so their state is preserved when the user returns. It creates a reactive object where only the top-level properties are tracked; nested objects stay non-reactive unless wrapped separately. v-show toggles CSS display while keeping the element in the DOM; v-if adds or removes the element entirely.

Question 15 Vue Cards

How do you register a custom directive globally?

Debug hooks that tell you which reactive dependency was tracked or which one caused a re-render. Call app.directive('focus', { mounted(el) { el.focus(); } }). Call app.component('MyName', MyComponent) during app setup. They are useful for highly dynamic output, headless UI libraries, and advanced composition patterns.

Question 16 Vue Cards

What is `PropType` in Vue?

It loads route components only when needed, shrinking the initial bundle size. Route params are part of the URL path and usually identify a resource, while query params modify filtering, sorting, or optional state. A helper type that lets you define complex prop types like arrays of objects or discriminated unions in the Options API. Call app.directive('focus', { mounted(el) { el.focus(); } }).

Question 17 Vue Cards

What is `watchEffect()`?

It manually notifies Vue that a shallowRef changed after you mutated its inner value without replacing the reference. A reactive effect that runs immediately and automatically tracks any dependencies used during execution. It shares values deeply through the component tree without prop drilling. It forces Vue to set a DOM property instead of an HTML attribute.

Question 18 Vue Cards

What does the `.prop` modifier on `v-bind` do?

It forces Vue to set a DOM property instead of an HTML attribute. It is a runtime+compiler API that turns a template string into a render function at runtime. Call app.directive('focus', { mounted(el) { el.focus(); } }). A JavaScript function that returns VNodes directly instead of using a template.

Question 19 Vue Cards

How do route params differ from query params?

It can emit fallback and resolve-related lifecycle events, which help coordinate async loading states. Avoid unnecessary reactive work, use stable keys, memoize expensive derivations, and virtualize very large lists. Route params are part of the URL path and usually identify a resource, while query params modify filtering, sorting, or optional state. It reduces prop noise but can make data flow less explicit if overused.

Question 20 Vue Cards

What is provide/inject useful for?

Keys help Vue preserve element identity correctly during updates, moves, and list diffing. It shares values deeply through the component tree without prop drilling. It runs after successful navigation and is useful for analytics, logging, and cleanup. A JavaScript function that returns VNodes directly instead of using a template.

Question 21 Vue Cards

How can a child support `v-model.capitalize`?

A compiler macro that declares and types the events a component can emit. It can emit fallback and resolve-related lifecycle events, which help coordinate async loading states. A composable is a reusable function that packages reactive state and logic for use across components. Read the generated modelModifiers prop and adjust behavior based on the modifier flags.

Question 22 Vue Cards

What does `getCurrentInstance()` return?

It returns the current active component instance and is mainly useful in advanced framework or library code. Debug hooks that tell you which reactive dependency was tracked or which one caused a re-render. It gives structure, tooling, traceability, and cleaner testing for shared state. A cached reactive value derived from other reactive sources that recomputes only when dependencies change.

Question 23 Vue Cards

What are `onRenderTracked` and `onRenderTriggered`?

It loads route components only when needed, shrinking the initial bundle size. Debug hooks that tell you which reactive dependency was tracked or which one caused a re-render. It can emit fallback and resolve-related lifecycle events, which help coordinate async loading states. Differences between server and client output, often from random values, time-based content, or browser-only state.

Question 24 Vue Cards

What is a render function in Vue?

A JavaScript function that returns VNodes directly instead of using a template. It reduces prop noise but can make data flow less explicit if overused. A Pinia store is a centralized reactive module for app-level state, actions, and derived values. Hydration attaches Vue's reactivity and event listeners to server-rendered HTML on the client.

Question 25 Vue Cards

How do you test a Vue component well?

Use watch() for side effects like API calls, persistence, or logging rather than value derivation. Unstable keys can cause DOM reuse bugs, broken form state, and flickering transitions. Assert the rendered behavior and emitted effects from the user's perspective rather than implementation details. A compiler macro that declares component props with clean syntax inside single-file components.

Question 26 Vue Cards

What is `triggerRef()` used for?

It caches inactive dynamic components so their state is preserved when the user returns. It pre-renders pages to HTML at build time for faster first load and better crawlability. Hydration attaches Vue's reactivity and event listeners to server-rendered HTML on the client. It manually notifies Vue that a shallowRef changed after you mutated its inner value without replacing the reference.

Question 27 Vue Cards

What is `shallowReactive` in Vue?

It is a runtime+compiler API that turns a template string into a render function at runtime. A compiler macro that declares component props with clean syntax inside single-file components. It creates a reactive object where only the top-level properties are tracked; nested objects stay non-reactive unless wrapped separately. v-enter-from, v-enter-active, v-enter-to, v-leave-from, v-leave-active, and v-leave-to.

Question 28 Vue Cards

What is `ref()` best for?

It stores reactive primitive values or single object references accessed through .value. Call app.directive('focus', { mounted(el) { el.focus(); } }). Avoid unnecessary reactive work, use stable keys, memoize expensive derivations, and virtualize very large lists. Assert the rendered behavior and emitted effects from the user's perspective rather than implementation details.

Question 29 Vue Cards

What is the tradeoff of provide/inject?

Debug hooks that tell you which reactive dependency was tracked or which one caused a re-render. It can block, redirect, or prepare route changes based on auth, unsaved data, permissions, or preload needs. It reduces prop noise but can make data flow less explicit if overused. Use the emits option with validation functions keyed by event name.

Question 30 Vue Cards

What problem do keys solve in `v-for`?

Keys help Vue preserve element identity correctly during updates, moves, and list diffing. Read the generated modelModifiers prop and adjust behavior based on the modifier flags. It wraps objects so their properties are tracked reactively without using .value. A JavaScript function that returns VNodes directly instead of using a template.

Question 31 Vue Cards

What is `router.afterEach` used for?

Avoid unnecessary reactive work, use stable keys, memoize expensive derivations, and virtualize very large lists. Read the generated modelModifiers prop and adjust behavior based on the modifier flags. It runs after successful navigation and is useful for analytics, logging, and cleanup. Unstable keys can cause DOM reuse bugs, broken form state, and flickering transitions.

Question 32 Vue Cards

What is a good performance habit in Vue lists?

Call app.directive('focus', { mounted(el) { el.focus(); } }). A helper type that lets you define complex prop types like arrays of objects or discriminated unions in the Options API. Read the generated modelModifiers prop and adjust behavior based on the modifier flags. Avoid unnecessary reactive work, use stable keys, memoize expensive derivations, and virtualize very large lists.

Question 33 Vue Cards

Why is `KeepAlive` useful?

Unstable keys can cause DOM reuse bugs, broken form state, and flickering transitions. It manually notifies Vue that a shallowRef changed after you mutated its inner value without replacing the reference. It caches inactive dynamic components so their state is preserved when the user returns. It creates a reactive object where only the top-level properties are tracked; nested objects stay non-reactive unless wrapped separately.

Question 34 Vue Cards

What is a Pinia store?

A compiler macro that declares and types the events a component can emit. A Pinia store is a centralized reactive module for app-level state, actions, and derived values. A cached reactive value derived from other reactive sources that recomputes only when dependencies change. It stores reactive primitive values or single object references accessed through .value.

Question 35 Vue Cards

Why use `defineComponent()`?

It improves TypeScript inference for props, emits, computed values, and component options. A compiler macro that declares and types the events a component can emit. Unstable keys can cause DOM reuse bugs, broken form state, and flickering transitions. Debug hooks that tell you which reactive dependency was tracked or which one caused a re-render.

Question 36 Vue Cards

What does `nextTick()` do?

It waits for Vue to finish applying pending DOM updates before running follow-up code. Route params are part of the URL path and usually identify a resource, while query params modify filtering, sorting, or optional state. Use v-slot="{ item, index }" or the shorthand #default="{ item, index }" on the parent side. Use watch() for side effects like API calls, persistence, or logging rather than value derivation.

Question 37 Vue Cards

What does `Teleport` solve?

It loads route components only when needed, shrinking the initial bundle size. It renders a component's DOM somewhere else in the document, which is ideal for modals, toasts, and overlays. Use the emits option with validation functions keyed by event name. It is a runtime+compiler API that turns a template string into a render function at runtime.

Question 38 Vue Cards

When should you use `watch()` instead of `computed()`?

Use watch() for side effects like API calls, persistence, or logging rather than value derivation. Differences between server and client output, often from random values, time-based content, or browser-only state. It returns the current active component instance and is mainly useful in advanced framework or library code. A compiler macro that declares component props with clean syntax inside single-file components.

Question 39 Vue Cards

How do you destructure slot props in Vue?

Use v-slot="{ item, index }" or the shorthand #default="{ item, index }" on the parent side. A reactive effect that runs immediately and automatically tracks any dependencies used during execution. They are useful for highly dynamic output, headless UI libraries, and advanced composition patterns. A helper type that lets you define complex prop types like arrays of objects or discriminated unions in the Options API.

Question 40 Vue Cards

What is `defineExpose()`?

It converts each property on a reactive object into a linked ref so destructuring stays reactive. It explicitly exposes selected methods or refs from a <script setup> component to a parent using template refs. A compiler macro that declares component props with clean syntax inside single-file components. Use watch() for side effects like API calls, persistence, or logging rather than value derivation.

Question 41 Vue Cards

What is `router.beforeResolve`?

It reduces prop noise but can make data flow less explicit if overused. v-show toggles CSS display while keeping the element in the DOM; v-if adds or removes the element entirely. A JavaScript function that returns VNodes directly instead of using a template. A global guard that runs after in-component and async route guards resolve but before navigation is confirmed.

Question 42 Vue Cards

What is `Vue.compile()`?

It is a runtime+compiler API that turns a template string into a render function at runtime. It forces Vue to set a DOM property instead of an HTML attribute. A JavaScript function that returns VNodes directly instead of using a template. Debug hooks that tell you which reactive dependency was tracked or which one caused a re-render.

Question 43 Vue Cards

What events can `<Suspense>` emit?

It can emit fallback and resolve-related lifecycle events, which help coordinate async loading states. It reduces prop noise but can make data flow less explicit if overused. A compiler macro that declares component props with clean syntax inside single-file components. Read the generated modelModifiers prop and adjust behavior based on the modifier flags.

Question 44 Vue Cards

What does `mode="out-in"` do on `<Transition>`?

v-enter-from, v-enter-active, v-enter-to, v-leave-from, v-leave-active, and v-leave-to. A cached reactive value derived from other reactive sources that recomputes only when dependencies change. It creates a reactive object where only the top-level properties are tracked; nested objects stay non-reactive unless wrapped separately. It waits for the leaving element to finish its transition before inserting the entering element.

Question 45 Vue Cards

What is the downside of destructuring a reactive object directly?

You can lose reactivity unless you convert properties with helpers like toRefs(). Hydration attaches Vue's reactivity and event listeners to server-rendered HTML on the client. A Pinia store is a centralized reactive module for app-level state, actions, and derived values. It explicitly exposes selected methods or refs from a <script setup> component to a parent using template refs.

Question 46 Vue Cards

What is a computed property?

A Pinia store is a centralized reactive module for app-level state, actions, and derived values. A cached reactive value derived from other reactive sources that recomputes only when dependencies change. It explicitly exposes selected methods or refs from a <script setup> component to a parent using template refs. It wraps objects so their properties are tracked reactively without using .value.

Question 47 Vue Cards

What does `toRefs()` do?

It loads route components only when needed, shrinking the initial bundle size. It converts each property on a reactive object into a linked ref so destructuring stays reactive. It creates a reactive object where only the top-level properties are tracked; nested objects stay non-reactive unless wrapped separately. It pre-renders pages to HTML at build time for faster first load and better crawlability.

Question 48 Vue Cards

What is `defineEmits()`?

It pre-renders pages to HTML at build time for faster first load and better crawlability. Assert the rendered behavior and emitted effects from the user's perspective rather than implementation details. Differences between server and client output, often from random values, time-based content, or browser-only state. A compiler macro that declares and types the events a component can emit.

Question 49 Vue Cards

What does a navigation guard protect?

It is a runtime+compiler API that turns a template string into a render function at runtime. It creates a reactive object where only the top-level properties are tracked; nested objects stay non-reactive unless wrapped separately. It renders a component's DOM somewhere else in the document, which is ideal for modals, toasts, and overlays. It can block, redirect, or prepare route changes based on auth, unsaved data, permissions, or preload needs.

Question 50 Vue Cards

What is static site generation (SSG) in Vue?

It wraps objects so their properties are tracked reactively without using .value. It pre-renders pages to HTML at build time for faster first load and better crawlability. A global guard that runs after in-component and async route guards resolve but before navigation is confirmed. Use v-slot="{ item, index }" or the shorthand #default="{ item, index }" on the parent side.

What are the six core Vue transition classes?

What is lazy loading a route?

Why is Pinia preferred over ad hoc global state?

How do you register a component globally?

What is hydration in Vue SSR?

Why should keys be stable and unique?

How do you validate emitted events?

What is reactive() best for?

What is defineProps() in <script setup>?

What is a composable in Vue 3?

What causes hydration mismatch errors?

When are render functions helpful?

Why is the Composition API useful?

What is the difference between v-show and v-if?

How do you register a custom directive globally?

What is PropType in Vue?

What is watchEffect()?

What does the .prop modifier on v-bind do?

How do route params differ from query params?

What is provide/inject useful for?

How can a child support v-model.capitalize?

What does getCurrentInstance() return?

What are onRenderTracked and onRenderTriggered?

What is a render function in Vue?

How do you test a Vue component well?

What is triggerRef() used for?

What is shallowReactive in Vue?

What is ref() best for?