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

**Target Audience:** Beginners who have seen .vue files but do not know what is inside one or what happens to it. Basic HTML, CSS and JavaScript assumed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The compiled JavaScript and CSS in sections 5 and 6 are the real, unedited output of @vue/compiler-sfc 3.5.44, the same compiler @vitejs/plugin-vue calls during a Vite build. The runnable

Question 1

What changed from Vue 2 to Vue 3, and what does Vue 2 end of life mean?

Accepted Answer

**Target Audience:** Developers who meet Vue 2 code at work, or see Vue 2 tutorials online, and need to explain what is different in Vue 3. Basic Vue knowledge helps but every term is defined. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The comparisons in sections 4 and 5 were not taken from the migration guide: the same code was run on **vue 2.7.16** and **vue 3.5.44** side by side in Node with jsdom, and the outputs are

Question 2

How do you bind classes and styles dynamically?

Accepted Answer

**Target Audience:** Anyone preparing for a Vue interview. Assumes basic HTML and CSS and a first look at Vue templates.
**Difficulty:** Easy

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts that give you the exact vocabulary. Every rendered class string, style attribute, warning and compiler line quoted below came from running the code on Vue 3.5.44 (compiled with `@vue/compiler-sfc`, mounted in jsdom).

## 1. Why This Even Matters — A Story First

Imagine a

Question 3

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

Accepted Answer

**Target Audience:** Vue 3 developers using `<script setup>` who want to understand the two macros they write in almost every component.
**Difficulty:** Easy

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. All compiled output and compiler errors come from `@vue/compiler-sfc` 3.5.44 `compileScript()`; runtime logs from a two-component app compiled the same way and mounted in jsdom; type errors from `vue-tsc` 3.3.13.

## 1. Why This Even Matters — A Story Fir

Question 4

What is a Single File Component (SFC)?

Accepted Answer

**Target Audience:** Beginners who have seen .vue files but do not know what is inside one or what happens to it. Basic HTML, CSS and JavaScript assumed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The compiled JavaScript and CSS in sections 5 and 6 are the real, unedited output of @vue/compiler-sfc 3.5.44, the same compiler @vitejs/plugin-vue calls during a Vite build. The runnable

Question 5

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

Accepted Answer

**Target Audience:** Vue developers using `<script setup>` who want the remaining component options and typed slots.
**Difficulty:** Medium

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. The compiler output and every error message below come from running `@vue/compiler-sfc` 3.5.44; the runnable example was mounted in jsdom; the type errors come from `vue-tsc` 3.3.13. The version claims were checked against the published `@vue/runtime-core` type definitions

Question 6

How do you make provide/inject type-safe?

Accepted Answer

**Target Audience:** Vue developers using TypeScript. Assumes you know what [provide and inject](/interview-question/what-are-provide-and-inject) do; this doc is only about typing them. **Difficulty:** Medium > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The type errors quoted here are the real output of vue-tsc 3.3.13 on Vue 3.5.44, and the runtime ou

Question 7

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

Accepted Answer

**Target Audience:** Vue 3 developers who know the [component v-model contract](/interview-question/how-does-v-model-work-on-components) and want to know what `defineModel()` really does.
**Difficulty:** Medium

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. The compiled output is from `@vue/compiler-sfc` 3.5.44 `compileScript()`, and every value read after a click or keystroke came from mounting the components in jsdom on Vue 3.5.44. Version history comes

Question 8

How do you use TypeScript with Vue (typed props, emits, refs, vue-tsc)?

Accepted Answer

**Target Audience:** Vue developers adopting TypeScript, or TypeScript developers new to Vue's single file components.
**Difficulty:** Medium

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. Every type error below is real output from `vue-tsc` 3.3.13 with TypeScript 5.9 and `strict: true`; compiled output comes from `@vue/compiler-sfc` 3.5.44; runtime behaviour and warnings come from mounting the components in jsdom on Vue 3.5.44; the `vite build` result is

Question 9

What is defineExpose?

Accepted Answer

**Target Audience:** Anyone preparing for a Vue interview who has used `

Question 10

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

Accepted Answer

**Target Audience:** Vue developers who already use template refs and want to know what changed in 3.5. The general rules for refs (timing, `v-for`, component instances) are in [accessing a DOM element or child component instance](/interview-question/how-do-you-access-a-dom-element-or-child-component-instance). **Difficulty:** Medium > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewe

VUE.JSDECODED.

Easy

What changed from Vue 2 to Vue 3, and what does Vue 2 end of life mean?

How do you bind classes and styles dynamically?

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

What is a Single File Component (SFC)?

Medium

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

How do you make provide/inject type-safe?

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

How do you use TypeScript with Vue (typed props, emits, refs, vue-tsc)?

What is defineExpose?

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?

Hard

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

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

What is async setup and top-level await?

How does the Vue compiler optimize templates (static hoisting, patch flags, block tree)?

What are common reactivity caveats in Vue?