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

Accepted Answer

**Target Audience:** Developers who already know [Transition](/interview-question/how-do-transition-and-transitiongroup-work), [KeepAlive](/interview-question/what-is-keep-alive-in-vue) and [Suspense](/interview-question/what-is-suspense-in-vue) on their own and need them to work together. **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 tra

Question 3

How do Transition and TransitionGroup work?

Accepted Answer

**Target Audience:** Developers comfortable with Vue templates and basic CSS transitions who want to know exactly what Vue does during an animation. **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 class sequences in section 4 were recorded on Vue 3.5.44 in jsdom with the repo's verify-vue-example.mjs harness. jsdom runs no CSS

Question 4

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 5

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

Question 6

What is a custom renderer in Vue (createRenderer)?

Accepted Answer

**Target Audience:** Vue developers curious about how Vue is structured internally, or evaluating Vue for a non-DOM target (canvas, 3D, terminal, native). **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 example passed scripts/verify-vue-example.mjs on Vue 3.5.44 (compiled and mounted in jsdom, button clicked). The termin

VUE.JSDECODED.

Easy

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

Medium

How do <Transition>, <KeepAlive> and <Suspense> compose in Vue 3?

How do Transition and TransitionGroup work?

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

Hard

How does Vue's virtual DOM diff keyed lists?

What is a custom renderer in Vue (createRenderer)?