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.JSDECODED.

Transmission log

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>, <KeepAlive> and <Suspense> compose in Vue 3?

How do Transition and TransitionGroup work?

What is the difference between ref and reactive?

Pinia colocation in 2025 — how do you colocate stores with routes/components?

What do defineOptions() and defineSlots() do in <script setup>?

How does <Suspense> work in Vue 3.5 after the 2024 stabilization?

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?

What is defineModel() in Vue 3.4+ and how does it replace manual prop + emit?

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?

useId() vs getCurrentInstance() — how do you generate SSR-safe IDs in Vue 3.5?

What is defineExpose?

What is the difference between computed and watch?

What is keep-alive in Vue?

What is useTemplateRef() (Vue 3.5) and how does it improve on ref=""?

What is defineExpose() and why are <script setup> components closed by default?

How do you add global properties or config?

How do Vue components communicate?

What is Teleport in Vue 3?

What are slots in Vue?

Why was Reactivity Transform ($ref, $computed) removed in Vue 3.4?

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?

watch vs watchEffect — flush timing and the new watch options in 3.5?

useAttrs() vs $attrs — how do you handle fallthrough attributes in composition API?

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

What are Vue lifecycle hooks?

When should you use readonly, markRaw, and toRaw in Vue reactivity?

How do dynamic components work?

What are v-once and v-memo?

What is Vapor mode in Vue 3.5+ and how does it differ from the virtual DOM?

Why use storeToRefs with Pinia?

What is effectScope?

How do generic <script setup> components work (generic="T")?

When should you choose Vapor over VDOM in a real app — trade-offs?

What is async setup and top-level await?

What is Suspense in Vue?

How does defineAsyncComponent work with loading, error and retry in 2025?

What do markRaw and toRaw do?

Why are composables preferred over mixins?

What are shallowRef and shallowReactive?

When should you use shallowRef / shallowReactive / triggerRef?

What are fallthrough attributes ($attrs)?

What are common reactivity caveats in Vue?

What is lazy hydration in Vue 3.5 — hydrate strategies (idle, visible, interaction)?

What is effectScope() and why do composables use it for cleanup?

What is nextTick in Vue?

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

How do you diagnose and fix hydration mismatches in Vue SSR / Nuxt 3?

Difficulty mix

Tested topics

Decryption key