Q: How does Vue's virtual DOM diff keyed lists?

**Target Audience:** Vue developers who use v-for with :key every day and want to explain what the renderer actually does with those keys. **Difficulty:** Hard > **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 DOM-operation counts in section 6 come from mounting lists with Vue 3.5.44 in jsdom and wrapping insertBefore , r

Question 1

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

Accepted Answer

**Target Audience:** Complete beginners preparing for a first Vue interview. Assumes you know a little HTML and JavaScript, nothing about Vue or any other framework. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The outputs in sections 5 and 6 were produced by actually compiling and running the code on Vue 3.5.44, the current stable r

Question 2

What are Vue directives? Give common examples.

Accepted Answer

**Target Audience:** Beginners who can read a basic Vue template and want to understand every v- attribute they see. Basic HTML and JavaScript assumed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The rendered output, the compiled render function and the warnings below come from compiling and mounting the example on Vue 3.5.44, not from memory. ## 1. Why This Even Matters — A Story First Imagine a theatre sc

Question 3

How do you render lists with v-for?

Accepted Answer

**Target Audience:** Beginners who need to show a list of things (products, messages, todos) in a Vue component. Basic JavaScript arrays and objects assumed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Every rendered list, DOM-identity check and error message below came from mounting the code on Vue 3.5.44 in jsdom and clicking through it. ## 1. Why This Even Matters — A Story First Imagine you are writing place cards f

Question 4

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 5

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

Accepted Answer

**Target Audience:** Anyone preparing for a Vue interview. Assumes you know `ref()` and lifecycle hooks at a basic level. **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. All output in the "Verified" sections was produced on Vue 3.5.44 with the repo verifier (compiled and mounted in jsdom) and with Vitest and Vue Test Utils. Real browser layout

Question 6

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

Question 7

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

Accepted Answer

**Target Audience:** Anyone rendering lists in Vue, from first project to code review. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Every output below was produced on Vue 3.5.44: the list behaviour by mounting SFCs in jsdom with the repo verifier (dev build, so warnings print), and the compiled flags with compile() from @vue/compiler-dom. The diff algorithm itself (the longest increasing subsequ

Question 8

What are v-once and v-memo?

Accepted Answer

**Target Audience:** Vue developers optimising rendering, and anyone asked how Vue templates compile. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The compiled render functions below were printed by compile() from @vue/compiler-dom and @vue/compiler-ssr 3.5.44 (the import lines are trimmed); render counts and behaviour come from mounting the SFCs in jsdom with the repo verifier. For t

Question 9

How do you render very large lists efficiently in Vue (virtual scrolling)?

Accepted Answer

**Target Audience:** Vue developers who have hit a slow page with a long list and want to explain or build virtual scrolling. Assumes v-for and computed. **Difficulty:** Hard > **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 runnable list passed scripts/verify-vue-example.mjs on Vue 3.5.44 (mounted in jsdom, scrolled by settin

Question 10

How does Vue's virtual DOM diff keyed lists?

Accepted Answer

**Target Audience:** Vue developers who use v-for with :key every day and want to explain what the renderer actually does with those keys. **Difficulty:** Hard > **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 DOM-operation counts in section 6 come from mounting lists with Vue 3.5.44 in jsdom and wrapping insertBefore, r

VUE.JSDECODED.

Easy