Vue Framework Practice Exam — LearnCoachAssist

Question 1 Vue Framework

What are scoped slots?

Scoped slots let a child component pass data back to the parent's slot content:
Child: <slot :item="item"></slot>
Parent: <template #default="{ item }">{{ item.name }}</template>
This enables the parent to customize rendering while the child provides the data. Use the router instance methods:
const router = useRouter()
router.push('/about') — navigate to a new URL
router.push({ name: 'user', params: { id: 1 } }) — named route
router.replace('/login') — replace without history entry
router.go(-1) — go back ref() wraps a single value (primitive or object) and requires .value to access it in script. reactive() wraps an object and provides direct property access.
const count = ref(0) // count.value
const state = reactive({ count: 0 }) // state.count Use defineStore():
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (state) => state.count * 2 },
  actions: { increment() { this.count++ } }
})

Question 2 Vue Framework

What is the difference between ref() and reactive()?

Event modifiers simplify common event handling patterns:

@click.prevent — calls preventDefault()
@click.stop — calls stopPropagation()
@click.once — triggers only once
@keyup.enter — listens for Enter key
@click.self — only if target is the element itself

ref() wraps a single value (primitive or object) and requires .value to access it in script. reactive() wraps an object and provides direct property access.
const count = ref(0) // count.value
const state = reactive({ count: 0 }) // state.count Navigation guards are hooks that run before or after route changes:

beforeEach — global, runs before every navigation
beforeEnter — per-route guard
beforeRouteEnter / beforeRouteLeave — in-component guards

Used for authentication checks, data fetching, and access control. Getters in Pinia are equivalent to computed properties for stores. They are cached and only recalculate when their dependencies change:
getters: {
doubleCount: (state) => state.count * 2,
doubleCountPlusOne() { return this.doubleCount + 1 }
}

Question 3 Vue Framework

What is Teleport in Vue?

<Teleport> renders a component's content in a different DOM location than its logical parent:
<Teleport to="body"><div class="modal">...</div></Teleport>
Useful for modals, tooltips, and notifications that need to break out of parent CSS constraints like overflow: hidden. v-model creates a two-way binding between a form input and reactive data:
<input v-model="message">
It is syntactic sugar for :value="message" combined with @input="message = $event.target.value". Event modifiers simplify common event handling patterns:

@click.prevent — calls preventDefault()
@click.stop — calls stopPropagation()
@click.once — triggers only once
@keyup.enter — listens for Enter key
@click.self — only if target is the element itself

Emits allow a child component to send events to its parent:
Child: const emit = defineEmits(['update'])
emit('update', newValue)
Parent: <Child @update="handleUpdate" />
Emits can include validation to ensure correct payload types.

Question 4 Vue Framework

What are Pinia getters?

Dynamic segments are defined with a colon prefix: /user/:id. Access params in a component with:
Composition API: const route = useRoute(); route.params.id
Options API: this.$route.params.id
Multiple params are supported: /user/:userId/post/:postId. Scoped slots let a child component pass data back to the parent's slot content:
Child: <slot :item="item"></slot>
Parent: <template #default="{ item }">{{ item.name }}</template>
This enables the parent to customize rendering while the child provides the data. Getters in Pinia are equivalent to computed properties for stores. They are cached and only recalculate when their dependencies change:
getters: {
  doubleCount: (state) => state.count * 2,
  doubleCountPlusOne() { return this.doubleCount + 1 }
} import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  { path: '/', component: Home },
  { path: '/user/:id', component: User },
  { path: '/:pathMatch(.*)*', component: NotFound }
]
const router = createRouter({ history: createWebHistory(), routes })

Question 5 Vue Framework

What is Suspense in Vue 3?

defineProps declares the props a component accepts in <script setup>:
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 }
})
It is a compiler macro — no import needed. Template refs provide direct access to DOM elements or child component instances:
<input ref="inputRef">
const inputRef = ref(null)
onMounted(() => inputRef.value.focus())
Refs are populated after the component is mounted. Use ref on a component to access its exposed methods. <Suspense> orchestrates async dependencies in a component tree. It shows fallback content while waiting for async components or async setup():
<Suspense>
  <template #default><AsyncChild /></template>
  <template #fallback>Loading...</template>
</Suspense> Key lifecycle hooks in order:

onBeforeMount — before initial DOM render
onMounted — after DOM is mounted
onBeforeUpdate — before re-render
onUpdated — after re-render
onBeforeUnmount — before teardown
onUnmounted — after teardown

Question 6 Vue Framework

What does the v-if directive do?

Emits can be validated with an object syntax:
const emit = defineEmits({
  submit(payload) {
    return payload.email && payload.password
  }
})
If the validator returns false, a console warning is emitted in development mode. v-if conditionally renders an element based on a truthy expression. The element is completely destroyed and recreated when the condition toggles:
<p v-if="isVisible">Shown</p>
Use with v-else-if and v-else for multiple conditions. Vue provides built-in modifiers for v-model:

.lazy — syncs on change instead of input
.number — casts input to a number
.trim — trims whitespace from input

Example: <input v-model.trim="name"> Computed properties are cached — they only re-evaluate when reactive dependencies change. Methods run on every re-render. Use computed for expensive derivations that depend on reactive state, and methods for event handlers or actions with side effects.

Question 7 Vue Framework

What are async components in Vue?

Vue provides built-in modifiers for v-model:

.lazy — syncs on change instead of input
.number — casts input to a number
.trim — trims whitespace from input

Example: <input v-model.trim="name"> Scoped slots let a child component pass data back to the parent's slot content:
Child: <slot :item="item"></slot>
Parent: <template #default="{ item }">{{ item.name }}</template>
This enables the parent to customize rendering while the child provides the data. Slots allow a parent component to pass template content into a child component's designated areas:
<MyCard><p>This goes into the slot</p></MyCard>
The child uses <slot></slot> to render the passed content. They enable flexible, reusable component design. Async components are loaded on demand using defineAsyncComponent:
const AsyncModal = defineAsyncComponent(() => import('./Modal.vue'))
They support options for loading and error components, delay, and timeout. Combined with Vue Router, they enable code splitting and lazy loading.

Question 8 Vue Framework

What are v-model modifiers?

v-on attaches an event listener to an element:
<button v-on:click="handleClick">Click</button>
Shorthand: <button @click="handleClick">Click</button>
Supports modifiers like .prevent, .stop, .once, and .self. Vue provides built-in modifiers for v-model:

.lazy — syncs on change instead of input
.number — casts input to a number
.trim — trims whitespace from input

Example: <input v-model.trim="name"> provide and inject enable dependency injection across the component tree without prop drilling:
Parent: provide('theme', ref('dark'))
Descendant: const theme = inject('theme')
Works across any depth of nesting, not just direct parent-child. Use reactive() from the Composition API:
import { reactive } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
This returns a deeply reactive proxy of the original object.

Question 9 Vue Framework

When should you use provide/inject vs props?

defineExpose explicitly exposes properties from a <script setup> component to parent template refs:
defineExpose({ reset, validate })
By default, <script setup> components are closed — the parent cannot access internal bindings without defineExpose. Getters in Pinia are equivalent to computed properties for stores. They are cached and only recalculate when their dependencies change:
getters: {
doubleCount: (state) => state.count * 2,
doubleCountPlusOne() { return this.doubleCount + 1 }
} Use props for direct parent-child communication. Use provide/inject when:

Data must pass through many intermediate components (prop drilling)
Building component libraries with shared context
Providing app-wide services (theme, locale, auth)

Prefer Pinia for complex shared state. Use reactive() from the Composition API:
import { reactive } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
This returns a deeply reactive proxy of the original object.

Question 10 Vue Framework

What are custom directives in Vue?

Use defineStore():
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (state) => state.count * 2 },
  actions: { increment() { this.count++ } }
}) Computed properties are cached reactive derivations. They recompute only when their dependencies change.
Composition API: const fullName = computed(() => first.value + ' ' + last.value)
Options API: defined in the computed option. They should be side-effect free. Custom directives provide low-level DOM access for reusable behavior:
const vFocus = { mounted: (el) => el.focus() }
Usage: <input v-focus>
Directive hooks mirror lifecycle: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted. shallowRef() creates a ref that is only reactive at the top level. Nested property changes are not tracked:
const state = shallowRef({ nested: { count: 0 } })
state.value.nested.count++ — won't trigger updates
state.value = { nested: { count: 1 } } — triggers update. Useful for performance optimization.

Question 11 Vue Framework

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

Vue provides built-in modifiers for v-model:

.lazy — syncs on change instead of input
.number — casts input to a number
.trim — trims whitespace from input

Example: <input v-model.trim="name"> Template refs provide direct access to DOM elements or child component instances:
<input ref="inputRef">
const inputRef = ref(null)
onMounted(() => inputRef.value.focus())
Refs are populated after the component is mounted. Use ref on a component to access its exposed methods. Use defineStore():
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (state) => state.count * 2 },
  actions: { increment() { this.count++ } }
}) v-if completely adds/removes the element from the DOM (higher toggle cost). v-show always keeps the element in the DOM and toggles its CSS display property (higher initial render cost).
Use v-show for frequent toggling, v-if for conditions that rarely change.

Question 12 Vue Framework

What is the Composition API in Vue 3?

shallowRef() creates a ref that is only reactive at the top level. Nested property changes are not tracked:
const state = shallowRef({ nested: { count: 0 } })
state.value.nested.count++ — won't trigger updates
state.value = { nested: { count: 1 } } — triggers update. Useful for performance optimization. Use reactive() from the Composition API:
import { reactive } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
This returns a deeply reactive proxy of the original object. The Composition API is a set of function-based APIs (ref, reactive, computed, watch, lifecycle hooks) that allow organizing component logic by feature rather than by option type. It is used inside setup() or <script setup>. Actions in Pinia are methods that can contain business logic and async operations. Unlike Vuex, there are no separate mutations:
actions: {
  async fetchUser(id) {
    this.user = await api.getUser(id)
  }
}

Question 13 Vue Framework

What does v-bind do in Vue?

Key lifecycle hooks in order:

onBeforeMount — before initial DOM render
onMounted — after DOM is mounted
onBeforeUpdate — before re-render
onUpdated — after re-render
onBeforeUnmount — before teardown
onUnmounted — after teardown

Event modifiers simplify common event handling patterns:

@click.prevent — calls preventDefault()
@click.stop — calls stopPropagation()
@click.once — triggers only once
@keyup.enter — listens for Enter key
@click.self — only if target is the element itself

v-bind dynamically binds an HTML attribute or component prop to an expression:
<img v-bind:src="imageUrl">
Shorthand: <img :src="imageUrl">
It can also bind multiple attributes at once using an object: v-bind="attrObject". onUnmounted is called after the component is removed from the DOM. Use it for cleanup:

Removing event listeners
Clearing timers and intervals
Cancelling API requests
Disconnecting WebSocket connections

Question 14 Vue Framework

What are dynamic route params in Vue Router?

Emits can be validated with an object syntax:
const emit = defineEmits({
  submit(payload) {
    return payload.email && payload.password
  }
})
If the validator returns false, a console warning is emitted in development mode. Vue Router is the official routing library for Vue.js. It maps URL paths to components, enabling single-page application navigation:

Nested routes
Dynamic route matching with params
Named routes and views
Navigation guards
History and hash mode

Dynamic segments are defined with a colon prefix: /user/:id. Access params in a component with:
Composition API: const route = useRoute(); route.params.id
Options API: this.$route.params.id
Multiple params are supported: /user/:userId/post/:postId. Event modifiers simplify common event handling patterns:

@click.prevent — calls preventDefault()
@click.stop — calls stopPropagation()
@click.once — triggers only once
@keyup.enter — listens for Enter key
@click.self — only if target is the element itself

Question 15 Vue Framework

What is defineProps in Vue 3?

Use onMounted when you need access to the rendered DOM, such as:

Fetching data from an API
Initializing third-party libraries (charts, maps)
Setting up event listeners on DOM elements
Accessing template refs

defineProps declares the props a component accepts in <script setup>:
const props = defineProps({
title: { type: String, required: true },
count: { type: Number, default: 0 }
})
It is a compiler macro — no import needed. Async components are loaded on demand using defineAsyncComponent:
const AsyncModal = defineAsyncComponent(() => import('./Modal.vue'))
They support options for loading and error components, delay, and timeout. Combined with Vue Router, they enable code splitting and lazy loading. Emits allow a child component to send events to its parent:
Child: const emit = defineEmits(['update'])
emit('update', newValue)
Parent: <Child @update="handleUpdate" />
Emits can include validation to ensure correct payload types.

Question 16 Vue Framework

How do you define routes in Vue Router?

Yes. A writable computed can define both a getter and setter:
const fullName = computed({
  get: () => first.value + ' ' + last.value,
  set: (val) => { [first.value, last.value] = val.split(' ') }
}) Use reactive() from the Composition API:
import { reactive } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
This returns a deeply reactive proxy of the original object. Emits can be validated with an object syntax:
const emit = defineEmits({
  submit(payload) {
    return payload.email && payload.password
  }
})
If the validator returns false, a console warning is emitted in development mode. import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  { path: '/', component: Home },
  { path: '/user/:id', component: User },
  { path: '/:pathMatch(.*)*', component: NotFound }
]
const router = createRouter({ history: createWebHistory(), routes })

Question 17 Vue Framework

What are template refs in Vue?

provide and inject enable dependency injection across the component tree without prop drilling:
Parent: provide('theme', ref('dark'))
Descendant: const theme = inject('theme')
Works across any depth of nesting, not just direct parent-child. Template refs provide direct access to DOM elements or child component instances:
<input ref="inputRef">
const inputRef = ref(null)
onMounted(() => inputRef.value.focus())
Refs are populated after the component is mounted. Use ref on a component to access its exposed methods. Use defineStore():
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (state) => state.count * 2 },
  actions: { increment() { this.count++ } }
}) ref() wraps a single value (primitive or object) and requires .value to access it in script. reactive() wraps an object and provides direct property access.
const count = ref(0) // count.value
const state = reactive({ count: 0 }) // state.count

Question 18 Vue Framework

Can computed properties have setters?

Use defineStore():
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (state) => state.count * 2 },
  actions: { increment() { this.count++ } }
}) <Teleport> renders a component's content in a different DOM location than its logical parent:
<Teleport to="body"><div class="modal">...</div></Teleport>
Useful for modals, tooltips, and notifications that need to break out of parent CSS constraints like overflow: hidden. v-bind dynamically binds an HTML attribute or component prop to an expression:
<img v-bind:src="imageUrl">
Shorthand: <img :src="imageUrl">
It can also bind multiple attributes at once using an object: v-bind="attrObject". Yes. A writable computed can define both a getter and setter:
const fullName = computed({
  get: () => first.value + ' ' + last.value,
  set: (val) => { [first.value, last.value] = val.split(' ') }
})

Question 19 Vue Framework

What does v-on do in Vue?

v-on attaches an event listener to an element:
<button v-on:click="handleClick">Click</button>
Shorthand: <button @click="handleClick">Click</button>
Supports modifiers like .prevent, .stop, .once, and .self. Named slots allow a component to have multiple slot outlets:
Child: <slot name="header"></slot>
Parent: <template #header><h1>Title</h1></template>
The # symbol is shorthand for v-slot:. Unnamed content goes to the default slot. Emits allow a child component to send events to its parent:
Child: const emit = defineEmits(['update'])
emit('update', newValue)
Parent: <Child @update="handleUpdate" />
Emits can include validation to ensure correct payload types. <script setup> is a compile-time syntactic sugar for the Composition API. Top-level bindings (variables, functions, imports) are automatically exposed to the template. It reduces boilerplate by eliminating the need to return values from setup().

Question 20 Vue Framework

What is Vue.js?

<Suspense> orchestrates async dependencies in a component tree. It shows fallback content while waiting for async components or async setup():
<Suspense>
<template #default><AsyncChild /></template>
<template #fallback>Loading...</template>
</Suspense> The Options API organizes component logic into predefined options:

data() — reactive state
methods — functions
computed — derived values
watch — side effects
mounted(), etc. — lifecycle hooks

v-on attaches an event listener to an element:
<button v-on:click="handleClick">Click</button>
Shorthand: <button @click="handleClick">Click</button>
Supports modifiers like .prevent, .stop, .once, and .self. Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable and focuses on the view layer, making it easy to integrate with other libraries or existing projects.

Question 21 Vue Framework

How do you handle events with modifiers in Vue?

Yes. A writable computed can define both a getter and setter:
const fullName = computed({
get: () => first.value + ' ' + last.value,
set: (val) => { [first.value, last.value] = val.split(' ') }
}) Emits allow a child component to send events to its parent:
Child: const emit = defineEmits(['update'])
emit('update', newValue)
Parent: <Child @update="handleUpdate" />
Emits can include validation to ensure correct payload types. Vue Router is the official routing library for Vue.js. It maps URL paths to components, enabling single-page application navigation:

Nested routes
Dynamic route matching with params
Named routes and views
Navigation guards
History and hash mode

Event modifiers simplify common event handling patterns:

@click.prevent — calls preventDefault()
@click.stop — calls stopPropagation()
@click.once — triggers only once
@keyup.enter — listens for Enter key
@click.self — only if target is the element itself

Question 22 Vue Framework

What are slots in Vue?

Vue provides built-in modifiers for v-model:

.lazy — syncs on change instead of input
.number — casts input to a number
.trim — trims whitespace from input

Example: <input v-model.trim="name"> Async components are loaded on demand using defineAsyncComponent:
const AsyncModal = defineAsyncComponent(() => import('./Modal.vue'))
They support options for loading and error components, delay, and timeout. Combined with Vue Router, they enable code splitting and lazy loading. watch() requires you to explicitly specify the source(s) to watch and provides old/new values. watchEffect() automatically tracks all reactive dependencies accessed inside its callback and runs immediately.
watchEffect(() => console.log(count.value)) Slots allow a parent component to pass template content into a child component's designated areas:
<MyCard><p>This goes into the slot</p></MyCard>
The child uses <slot></slot> to render the passed content. They enable flexible, reusable component design.

Question 23 Vue Framework

What is defineExpose in Vue 3?

The Options API organizes component logic into predefined options:

data() — reactive state
methods — functions
computed — derived values
watch — side effects
mounted(), etc. — lifecycle hooks

Named slots allow a component to have multiple slot outlets:
Child: <slot name="header"></slot>
Parent: <template #header><h1>Title</h1></template>
The # symbol is shorthand for v-slot:. Unnamed content goes to the default slot. v-if completely adds/removes the element from the DOM (higher toggle cost). v-show always keeps the element in the DOM and toggles its CSS display property (higher initial render cost).
Use v-show for frequent toggling, v-if for conditions that rarely change. defineExpose explicitly exposes properties from a <script setup> component to parent template refs:
defineExpose({ reset, validate })
By default, <script setup> components are closed — the parent cannot access internal bindings without defineExpose.

Question 24 Vue Framework

What is the script setup syntax in Vue 3?

Template refs provide direct access to DOM elements or child component instances:
<input ref="inputRef">
const inputRef = ref(null)
onMounted(() => inputRef.value.focus())
Refs are populated after the component is mounted. Use ref on a component to access its exposed methods. v-model creates a two-way binding between a form input and reactive data:
<input v-model="message">
It is syntactic sugar for :value="message" combined with @input="message = $event.target.value". <script setup> is a compile-time syntactic sugar for the Composition API. Top-level bindings (variables, functions, imports) are automatically exposed to the template. It reduces boilerplate by eliminating the need to return values from setup(). The Composition API is a set of function-based APIs (ref, reactive, computed, watch, lifecycle hooks) that allow organizing component logic by feature rather than by option type. It is used inside setup() or <script setup>.

Question 25 Vue Framework

What are Pinia actions?

Actions in Pinia are methods that can contain business logic and async operations. Unlike Vuex, there are no separate mutations:
actions: {
  async fetchUser(id) {
    this.user = await api.getUser(id)
  }
} Event modifiers simplify common event handling patterns:

@click.prevent — calls preventDefault()
@click.stop — calls stopPropagation()
@click.once — triggers only once
@keyup.enter — listens for Enter key
@click.self — only if target is the element itself

defineProps declares the props a component accepts in <script setup>:
const props = defineProps({
title: { type: String, required: true },
count: { type: Number, default: 0 }
})
It is a compiler macro — no import needed. onUnmounted is called after the component is removed from the DOM. Use it for cleanup:

Removing event listeners
Clearing timers and intervals
Cancelling API requests
Disconnecting WebSocket connections

Question 26 Vue Framework

What is the difference between computed properties and methods?

The :key attribute gives Vue a unique identity for each list item so it can efficiently patch and reorder DOM elements. Without keys, Vue uses an in-place patch strategy that can cause bugs with stateful elements.
<li v-for="item in items" :key="item.id"> defineExpose explicitly exposes properties from a <script setup> component to parent template refs:
defineExpose({ reset, validate })
By default, <script setup> components are closed — the parent cannot access internal bindings without defineExpose. Computed properties are cached — they only re-evaluate when reactive dependencies change. Methods run on every re-render. Use computed for expensive derivations that depend on reactive state, and methods for event handlers or actions with side effects. Scoped slots let a child component pass data back to the parent's slot content:
Child: <slot :item="item"></slot>
Parent: <template #default="{ item }">{{ item.name }}</template>
This enables the parent to customize rendering while the child provides the data.

Question 27 Vue Framework

What is the key attribute used for in v-for?

toRefs() converts a reactive object's properties into individual refs that maintain reactivity when destructured:
const state = reactive({ name: 'Vue', version: 3 })
const { name, version } = toRefs(state)
Without toRefs, destructured values lose their reactive connection. Define with a setup function:
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
}) Yes. A writable computed can define both a getter and setter:
const fullName = computed({
  get: () => first.value + ' ' + last.value,
  set: (val) => { [first.value, last.value] = val.split(' ') }
}) The :key attribute gives Vue a unique identity for each list item so it can efficiently patch and reorder DOM elements. Without keys, Vue uses an in-place patch strategy that can cause bugs with stateful elements.
<li v-for="item in items" :key="item.id">

Question 28 Vue Framework

What is Vue Router?

Vue Router is the official routing library for Vue.js. It maps URL paths to components, enabling single-page application navigation:

Nested routes
Dynamic route matching with params
Named routes and views
Navigation guards
History and hash mode

defineExpose explicitly exposes properties from a <script setup> component to parent template refs:
defineExpose({ reset, validate })
By default, <script setup> components are closed — the parent cannot access internal bindings without defineExpose. Dynamic segments are defined with a colon prefix: /user/:id. Access params in a component with:
Composition API: const route = useRoute(); route.params.id
Options API: this.$route.params.id
Multiple params are supported: /user/:userId/post/:postId. Use props for direct parent-child communication. Use provide/inject when:

Data must pass through many intermediate components (prop drilling)
Building component libraries with shared context
Providing app-wide services (theme, locale, auth)

Prefer Pinia for complex shared state.

Question 29 Vue Framework

What are computed properties in Vue?

defineProps declares the props a component accepts in <script setup>:
const props = defineProps({
title: { type: String, required: true },
count: { type: Number, default: 0 }
})
It is a compiler macro — no import needed. v-on attaches an event listener to an element:
<button v-on:click="handleClick">Click</button>
Shorthand: <button @click="handleClick">Click</button>
Supports modifiers like .prevent, .stop, .once, and .self. The :key attribute gives Vue a unique identity for each list item so it can efficiently patch and reorder DOM elements. Without keys, Vue uses an in-place patch strategy that can cause bugs with stateful elements.
<li v-for="item in items" :key="item.id"> Computed properties are cached reactive derivations. They recompute only when their dependencies change.
Composition API: const fullName = computed(() => first.value + ' ' + last.value)
Options API: defined in the computed option. They should be side-effect free.

Question 30 Vue Framework

What are named slots?

Named slots allow a component to have multiple slot outlets:
Child: <slot name="header"></slot>
Parent: <template #header><h1>Title</h1></template>
The # symbol is shorthand for v-slot:. Unnamed content goes to the default slot. Use props for direct parent-child communication. Use provide/inject when:

Data must pass through many intermediate components (prop drilling)
Building component libraries with shared context
Providing app-wide services (theme, locale, auth)

Prefer Pinia for complex shared state. Custom directives provide low-level DOM access for reusable behavior:
const vFocus = { mounted: (el) => el.focus() }
Usage: <input v-focus>
Directive hooks mirror lifecycle: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted. The Composition API is a set of function-based APIs (ref, reactive, computed, watch, lifecycle hooks) that allow organizing component logic by feature rather than by option type. It is used inside setup() or <script setup>.

Question 31 Vue Framework

When should you use the onMounted hook?

Use onMounted when you need access to the rendered DOM, such as:

Fetching data from an API
Initializing third-party libraries (charts, maps)
Setting up event listeners on DOM elements
Accessing template refs

provide and inject enable dependency injection across the component tree without prop drilling:
Parent: provide('theme', ref('dark'))
Descendant: const theme = inject('theme')
Works across any depth of nesting, not just direct parent-child. ref() wraps a single value (primitive or object) and requires .value to access it in script. reactive() wraps an object and provides direct property access.
const count = ref(0) // count.value
const state = reactive({ count: 0 }) // state.count Async components are loaded on demand using defineAsyncComponent:
const AsyncModal = defineAsyncComponent(() => import('./Modal.vue'))
They support options for loading and error components, delay, and timeout. Combined with Vue Router, they enable code splitting and lazy loading.

Question 32 Vue Framework

What is shallowRef() in Vue?

Template refs provide direct access to DOM elements or child component instances:
<input ref="inputRef">
const inputRef = ref(null)
onMounted(() => inputRef.value.focus())
Refs are populated after the component is mounted. Use ref on a component to access its exposed methods. Pinia is the official state management library for Vue 3, replacing Vuex. Key features:

Simpler API with no mutations
Full TypeScript support
Composition API and Options API store styles
DevTools integration
Modular by design — each store is independent

The Vue reactivity system automatically tracks dependencies and updates the DOM when reactive state changes. In Vue 3, it uses Proxy objects (instead of Object.defineProperty in Vue 2) to intercept get/set operations on reactive data. shallowRef() creates a ref that is only reactive at the top level. Nested property changes are not tracked:
const state = shallowRef({ nested: { count: 0 } })
state.value.nested.count++ — won't trigger updates
state.value = { nested: { count: 1 } } — triggers update. Useful for performance optimization.

Question 33 Vue Framework

How does the v-for directive work?

Computed properties are cached — they only re-evaluate when reactive dependencies change. Methods run on every re-render. Use computed for expensive derivations that depend on reactive state, and methods for event handlers or actions with side effects. v-if conditionally renders an element based on a truthy expression. The element is completely destroyed and recreated when the condition toggles:
<p v-if="isVisible">Shown</p>
Use with v-else-if and v-else for multiple conditions. Custom directives provide low-level DOM access for reusable behavior:
const vFocus = { mounted: (el) => el.focus() }
Usage: <input v-focus>
Directive hooks mirror lifecycle: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted. v-for renders a list of items by iterating over an array or object:
<li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>
A unique :key attribute is required for efficient DOM patching.

Question 34 Vue Framework

How does v-model work?

defineExpose explicitly exposes properties from a <script setup> component to parent template refs:
defineExpose({ reset, validate })
By default, <script setup> components are closed — the parent cannot access internal bindings without defineExpose. Define with a setup function:
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
}) import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  { path: '/', component: Home },
  { path: '/user/:id', component: User },
  { path: '/:pathMatch(.*)*', component: NotFound }
]
const router = createRouter({ history: createWebHistory(), routes }) v-model creates a two-way binding between a form input and reactive data:
<input v-model="message">
It is syntactic sugar for :value="message" combined with @input="message = $event.target.value".

Question 35 Vue Framework

What is provide/inject in Vue?

Emits can be validated with an object syntax:
const emit = defineEmits({
  submit(payload) {
    return payload.email && payload.password
  }
})
If the validator returns false, a console warning is emitted in development mode. provide and inject enable dependency injection across the component tree without prop drilling:
Parent: provide('theme', ref('dark'))
Descendant: const theme = inject('theme')
Works across any depth of nesting, not just direct parent-child. Define with a setup function:
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
}) The Options API organizes component logic into predefined options:

data() — reactive state
methods — functions
computed — derived values
watch — side effects
mounted(), etc. — lifecycle hooks

Question 36 Vue Framework

What is the onUnmounted hook used for?

shallowRef() creates a ref that is only reactive at the top level. Nested property changes are not tracked:
const state = shallowRef({ nested: { count: 0 } })
state.value.nested.count++ — won't trigger updates
state.value = { nested: { count: 1 } } — triggers update. Useful for performance optimization. Use defineStore():
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (state) => state.count * 2 },
  actions: { increment() { this.count++ } }
}) onUnmounted is called after the component is removed from the DOM. Use it for cleanup:

Removing event listeners
Clearing timers and intervals
Cancelling API requests
Disconnecting WebSocket connections

v-for renders a list of items by iterating over an array or object:
<li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>
A unique :key attribute is required for efficient DOM patching.

Question 37 Vue Framework

How do you declare emits with validation?

Emits can be validated with an object syntax:
const emit = defineEmits({
  submit(payload) {
    return payload.email && payload.password
  }
})
If the validator returns false, a console warning is emitted in development mode. Use reactive() from the Composition API:
import { reactive } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
This returns a deeply reactive proxy of the original object. watch() requires you to explicitly specify the source(s) to watch and provides old/new values. watchEffect() automatically tracks all reactive dependencies accessed inside its callback and runs immediately.
watchEffect(() => console.log(count.value)) toRefs() converts a reactive object's properties into individual refs that maintain reactivity when destructured:
const state = reactive({ name: 'Vue', version: 3 })
const { name, version } = toRefs(state)
Without toRefs, destructured values lose their reactive connection.

Question 38 Vue Framework

What are emits in Vue?

Dynamic segments are defined with a colon prefix: /user/:id. Access params in a component with:
Composition API: const route = useRoute(); route.params.id
Options API: this.$route.params.id
Multiple params are supported: /user/:userId/post/:postId. Emits allow a child component to send events to its parent:
Child: const emit = defineEmits(['update'])
emit('update', newValue)
Parent: <Child @update="handleUpdate" />
Emits can include validation to ensure correct payload types. Use onMounted when you need access to the rendered DOM, such as:

Fetching data from an API
Initializing third-party libraries (charts, maps)
Setting up event listeners on DOM elements
Accessing template refs

Navigation guards are hooks that run before or after route changes:

beforeEach — global, runs before every navigation
beforeEnter — per-route guard
beforeRouteEnter / beforeRouteLeave — in-component guards

Used for authentication checks, data fetching, and access control.

Question 39 Vue Framework

What is the Vue reactivity system?

The Vue reactivity system automatically tracks dependencies and updates the DOM when reactive state changes. In Vue 3, it uses Proxy objects (instead of Object.defineProperty in Vue 2) to intercept get/set operations on reactive data. Async components are loaded on demand using defineAsyncComponent:
const AsyncModal = defineAsyncComponent(() => import('./Modal.vue'))
They support options for loading and error components, delay, and timeout. Combined with Vue Router, they enable code splitting and lazy loading. Use reactive() from the Composition API:
import { reactive } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
This returns a deeply reactive proxy of the original object. defineProps declares the props a component accepts in <script setup>:
const props = defineProps({
title: { type: String, required: true },
count: { type: Number, default: 0 }
})
It is a compiler macro — no import needed.

Question 40 Vue Framework

What is toRefs() used for?

Dynamic segments are defined with a colon prefix: /user/:id. Access params in a component with:
Composition API: const route = useRoute(); route.params.id
Options API: this.$route.params.id
Multiple params are supported: /user/:userId/post/:postId. Named slots allow a component to have multiple slot outlets:
Child: <slot name="header"></slot>
Parent: <template #header><h1>Title</h1></template>
The # symbol is shorthand for v-slot:. Unnamed content goes to the default slot. Async components are loaded on demand using defineAsyncComponent:
const AsyncModal = defineAsyncComponent(() => import('./Modal.vue'))
They support options for loading and error components, delay, and timeout. Combined with Vue Router, they enable code splitting and lazy loading. toRefs() converts a reactive object's properties into individual refs that maintain reactivity when destructured:
const state = reactive({ name: 'Vue', version: 3 })
const { name, version } = toRefs(state)
Without toRefs, destructured values lose their reactive connection.

Question 41 Vue Framework

What is the Options API in Vue?

The Options API organizes component logic into predefined options:

data() — reactive state
methods — functions
computed — derived values
watch — side effects
mounted(), etc. — lifecycle hooks

v-for renders a list of items by iterating over an array or object:
<li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>
A unique :key attribute is required for efficient DOM patching. Define with a setup function:
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
}) ref() wraps a single value (primitive or object) and requires .value to access it in script. reactive() wraps an object and provides direct property access.
const count = ref(0) // count.value
const state = reactive({ count: 0 }) // state.count

Question 42 Vue Framework

What is Pinia?

ref() wraps a single value (primitive or object) and requires .value to access it in script. reactive() wraps an object and provides direct property access.
const count = ref(0) // count.value
const state = reactive({ count: 0 }) // state.count Async components are loaded on demand using defineAsyncComponent:
const AsyncModal = defineAsyncComponent(() => import('./Modal.vue'))
They support options for loading and error components, delay, and timeout. Combined with Vue Router, they enable code splitting and lazy loading. Pinia is the official state management library for Vue 3, replacing Vuex. Key features:

Simpler API with no mutations
Full TypeScript support
Composition API and Options API store styles
DevTools integration
Modular by design — each store is independent

Computed properties are cached reactive derivations. They recompute only when their dependencies change.
Composition API: const fullName = computed(() => first.value + ' ' + last.value)
Options API: defined in the computed option. They should be side-effect free.

Question 43 Vue Framework

What are the Vue 3 lifecycle hooks?

Key lifecycle hooks in order:

onBeforeMount — before initial DOM render
onMounted — after DOM is mounted
onBeforeUpdate — before re-render
onUpdated — after re-render
onBeforeUnmount — before teardown
onUnmounted — after teardown

Computed properties are cached — they only re-evaluate when reactive dependencies change. Methods run on every re-render. Use computed for expensive derivations that depend on reactive state, and methods for event handlers or actions with side effects. Use defineStore():
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (state) => state.count * 2 },
  actions: { increment() { this.count++ } }
}) Named slots allow a component to have multiple slot outlets:
Child: <slot name="header"></slot>
Parent: <template #header><h1>Title</h1></template>
The # symbol is shorthand for v-slot:. Unnamed content goes to the default slot.

Question 44 Vue Framework

How do you navigate programmatically with Vue Router?

Scoped slots let a child component pass data back to the parent's slot content:
Child: <slot :item="item"></slot>
Parent: <template #default="{ item }">{{ item.name }}</template>
This enables the parent to customize rendering while the child provides the data. v-bind dynamically binds an HTML attribute or component prop to an expression:
<img v-bind:src="imageUrl">
Shorthand: <img :src="imageUrl">
It can also bind multiple attributes at once using an object: v-bind="attrObject". toRefs() converts a reactive object's properties into individual refs that maintain reactivity when destructured:
const state = reactive({ name: 'Vue', version: 3 })
const { name, version } = toRefs(state)
Without toRefs, destructured values lose their reactive connection. Use the router instance methods:
const router = useRouter()
router.push('/about') — navigate to a new URL
router.push({ name: 'user', params: { id: 1 } }) — named route
router.replace('/login') — replace without history entry
router.go(-1) — go back

Question 45 Vue Framework

How do you use a Pinia store with the Composition API style?

Template refs provide direct access to DOM elements or child component instances:
<input ref="inputRef">
const inputRef = ref(null)
onMounted(() => inputRef.value.focus())
Refs are populated after the component is mounted. Use ref on a component to access its exposed methods. defineProps declares the props a component accepts in <script setup>:
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 }
})
It is a compiler macro — no import needed. Named slots allow a component to have multiple slot outlets:
Child: <slot name="header"></slot>
Parent: <template #header><h1>Title</h1></template>
The # symbol is shorthand for v-slot:. Unnamed content goes to the default slot. Define with a setup function:
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
})

Question 46 Vue Framework

What are watchers in Vue?

<Teleport> renders a component's content in a different DOM location than its logical parent:
<Teleport to="body"><div class="modal">...</div></Teleport>
Useful for modals, tooltips, and notifications that need to break out of parent CSS constraints like overflow: hidden. watch() requires you to explicitly specify the source(s) to watch and provides old/new values. watchEffect() automatically tracks all reactive dependencies accessed inside its callback and runs immediately.
watchEffect(() => console.log(count.value)) Watchers perform side effects in response to reactive state changes. In the Composition API, use watch() or watchEffect():
watch(count, (newVal, oldVal) => { console.log(newVal) })
In the Options API, use the watch option. v-if conditionally renders an element based on a truthy expression. The element is completely destroyed and recreated when the condition toggles:
<p v-if="isVisible">Shown</p>
Use with v-else-if and v-else for multiple conditions.

Question 47 Vue Framework

What is the difference between watch() and watchEffect()?

watch() requires you to explicitly specify the source(s) to watch and provides old/new values. watchEffect() automatically tracks all reactive dependencies accessed inside its callback and runs immediately.
watchEffect(() => console.log(count.value)) v-for renders a list of items by iterating over an array or object:
<li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>
A unique :key attribute is required for efficient DOM patching. Use reactive() from the Composition API:
import { reactive } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
This returns a deeply reactive proxy of the original object. Use the router instance methods:
const router = useRouter()
router.push('/about') — navigate to a new URL
router.push({ name: 'user', params: { id: 1 } }) — named route
router.replace('/login') — replace without history entry
router.go(-1) — go back

Question 48 Vue Framework

How do you define a Pinia store?

defineProps declares the props a component accepts in <script setup>:
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 }
})
It is a compiler macro — no import needed. <script setup> is a compile-time syntactic sugar for the Composition API. Top-level bindings (variables, functions, imports) are automatically exposed to the template. It reduces boilerplate by eliminating the need to return values from setup(). Use defineStore():
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (state) => state.count * 2 },
  actions: { increment() { this.count++ } }
}) Use onMounted when you need access to the rendered DOM, such as:

Fetching data from an API
Initializing third-party libraries (charts, maps)
Setting up event listeners on DOM elements
Accessing template refs

Question 49 Vue Framework

How do you create a reactive object in Vue 3?

Emits can be validated with an object syntax:
const emit = defineEmits({
  submit(payload) {
    return payload.email && payload.password
  }
})
If the validator returns false, a console warning is emitted in development mode. Actions in Pinia are methods that can contain business logic and async operations. Unlike Vuex, there are no separate mutations:
actions: {
  async fetchUser(id) {
    this.user = await api.getUser(id)
  }
} Use reactive() from the Composition API:
import { reactive } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
This returns a deeply reactive proxy of the original object. The :key attribute gives Vue a unique identity for each list item so it can efficiently patch and reorder DOM elements. Without keys, Vue uses an in-place patch strategy that can cause bugs with stateful elements.
<li v-for="item in items" :key="item.id">

Question 50 Vue Framework

What are navigation guards in Vue Router?

Navigation guards are hooks that run before or after route changes:

beforeEach — global, runs before every navigation
beforeEnter — per-route guard
beforeRouteEnter / beforeRouteLeave — in-component guards

Used for authentication checks, data fetching, and access control. <Suspense> orchestrates async dependencies in a component tree. It shows fallback content while waiting for async components or async setup():
<Suspense>
<template #default><AsyncChild /></template>
<template #fallback>Loading...</template>
</Suspense> v-on attaches an event listener to an element:
<button v-on:click="handleClick">Click</button>
Shorthand: <button @click="handleClick">Click</button>
Supports modifiers like .prevent, .stop, .once, and .self. toRefs() converts a reactive object's properties into individual refs that maintain reactivity when destructured:
const state = reactive({ name: 'Vue', version: 3 })
const { name, version } = toRefs(state)
Without toRefs, destructured values lose their reactive connection.