Q: What is a Single File Component (SFC)?

An **SFC** is a `.vue` file bundling a component's ` ` (markup), ` ` (logic), and ` ` (CSS, optionally `scoped`) in one file. This colocation keeps a component self-contained and supports tooling like scoped styles and hot reload.

Question 1

What is Vue.js and what are its core features?

Accepted Answer

**Vue.js** is a progressive JavaScript framework for building UIs. Core features: a reactive data system, a declarative template syntax, single-file components (`.vue`), a component-based architecture, and an approachable adoption curve — you can drop it into a page or build a full SPA.

Question 2

What is v-html and what is the risk of using it?

Accepted Answer

**v-html** sets an element's `innerHTML` to render raw HTML (unlike interpolation, which escapes text). It's a security risk — rendering untrusted HTML enables **XSS** — so only use it with sanitized, trusted content.

Question 3

What are Vue directives? Give common examples.

Accepted Answer

**Directives** are special `v-` attributes that apply reactive behavior to the DOM: `v-if`/`v-show` (conditional render/display), `v-for` (lists), `v-bind` (`:`) (attributes), `v-on` (`@`) (events), and `v-model` (two-way binding on inputs).

Question 4

What are dynamic arguments and v-bind shorthand?

Accepted Answer

`:attr` is shorthand for `v-bind:attr`. **Dynamic arguments** let the bound name be computed: `:[attrName]="value"` or `@[eventName]="handler"` — useful when the attribute/event to bind is determined at runtime.

Question 5

How do you bind classes and styles dynamically?

Accepted Answer

`:class` accepts an object `{ active: isActive }` or array `[base, isActive && 'on']`; `:style` accepts an object `{ color: c }` or array of objects. Vue merges them with static classes/styles and handles vendor prefixing for styles.

Question 6

How do defineProps and defineEmits work in <script setup>?

Accepted Answer

In `<script setup>`, **defineProps** declares props and **defineEmits** declares emitted events — compiler macros that need no import. With TypeScript you can type them generically: `defineProps<{ id: number }>()` and `defineEmits<{ change: [v: string] }>()`.

Question 7

What are scoped styles in Vue?

Accepted Answer

`<style scoped>` limits CSS to the current component by adding a unique data attribute to its elements and to the selectors, so styles don't leak to other components. For deliberately styling child content you use `:deep()`.

Question 8

What is a Single File Component (SFC)?

Accepted Answer

An **SFC** is a `.vue` file bundling a component's `

Question 9

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

Accepted Answer

`v-if` actually **adds/removes** the element from the DOM (and its component lifecycle) — better when the condition rarely changes. `v-show` keeps the element in the DOM and just toggles `display: none` — cheaper to toggle frequently but always rendered.

Question 10

What are v-model modifiers?

Accepted Answer

Built-in v-model modifiers adjust input handling: **.lazy** syncs on `change` instead of `input`, **.number** casts to a number, and **.trim** trims whitespace. Custom components can define their own modifiers too.

Vue.js Interview Library

Question Catalog

What is Vue.js and what are its core features?

What is v-html and what is the risk of using it?

What are Vue directives? Give common examples.

What are dynamic arguments and v-bind shorthand?

How do you bind classes and styles dynamically?

How do defineProps and defineEmits work in <script setup>?

What are scoped styles in Vue?

What is a Single File Component (SFC)?

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

What are v-model modifiers?

How does Vue's reactivity system work?

What is the difference between watch and watchEffect?

How do Transition and TransitionGroup work?

What is the difference between ref and reactive?

How do you make provide/inject type-safe?

How do dynamic routes and route params work in Vue Router?

What is a Vue plugin?

Why declare emits and can you validate them?

What are provide and inject?

How does v-model work on components?

Can a computed property be writable?

What are Vue Router navigation guards?

How do you access a DOM element or child component instance?

What is defineExpose?

What is the difference between computed and watch?

What is keep-alive in Vue?

How do you add global properties or config?

How do Vue components communicate?

What is Teleport in Vue 3?

What are slots in Vue?

How do you create a custom directive in Vue?

What are composables in Vue?

What is Pinia and why use it?

What does readonly do in Vue's reactivity?

What do toRef and toRefs do?

What is the Composition API and how does it differ from the Options API?

What are Vue lifecycle hooks?

How do dynamic components work?

What are v-once and v-memo?

Why use storeToRefs with Pinia?

What is effectScope?

What is async setup and top-level await?

What is Suspense in Vue?

What do markRaw and toRaw do?

Why are composables preferred over mixins?

What are shallowRef and shallowReactive?

What are fallthrough attributes ($attrs)?

What are common reactivity caveats in Vue?

What is nextTick in Vue?

Why is the :key attribute important in v-for?

Difficulty Distribution

Tested Topics

Study Guide