How does Vue's reactivity system work? | Interview Question

Q: How does Vue's reactivity system work?

**Target Audience:** Anyone preparing for a Vue interview — assumes basic JavaScript objects and functions, no Vue internals required. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every output block below was produced by running the code on Vue 3.5.44: plain reactivity with node , components compiled with @vue/compiler-sfc and mounted in jsdom. ## 1. Why This Even Matters — A Story First Think of a spreadsheet. Cell C1 holds =A1*B1 . You never tell the spreadsheet "please recalculate C1 now"; you type a new number into A1 and C1 changes. Even better, if you type into Z99, which nothing uses, nothing recalculates. For that to work, the spreadsheet must have *noticed* that C1 reads A1 and B1. It keeps a little map: "A1 is used by C1". When A1 changes it looks up that map and recalculates onl

The problem

Question presented to candidate: "When I change cart.qty in a Vue 3 component, the total on screen updates without me calling anything. Explain how Vue knows what to update, and what actually happens between my assignment and the DOM changing."

What a strong answer should cover:

reactive() returns a JavaScript Proxy; ref() wraps a value in an object whose .value getter and setter do the same job.
Reading a property inside a running effect calls track, which records "this effect depends on this key". Writing calls trigger, which re-runs only the effects that depend on that key.
The component render function, every computed and every watcher are effects; dependencies are collected dynamically on each run, so a branch that was not read is not a dependency.
Writes are batched: the scheduler queues each affected job once and flushes the queue in a microtask, so three synchronous writes cause one render.
Contrast with Vue 2 (Object.defineProperty, no tracking of added keys) and mention the 3.4 and 3.5 internal refactors.
Know where the system stops: destructured values, non-proxied built-ins, and identity differences between the proxy and the raw object.

Clarifying questions expected:

"Do you want the user-facing API, or the internals: track, trigger and the scheduler?"
"Are we talking about Vue 3 only, or should I contrast it with Vue 2?"

Code / implementation expected: Optional — a 20-line toy track/trigger with a Proxy, or a component that logs how many renders three writes cause.

reactivity

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Anyone preparing for a Vue interview — assumes basic JavaScript objects and functions, no Vue internals required. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every output block below was produced by running the code on Vue 3.5.44: plain reactivity with node, components compiled with @vue/compiler-sfc and mounted in jsdom.

1. Why This Even Matters — A Story First

Think of a spreadsheet. Cell C1 holds =A1*B1. You never tell the spreadsheet "please recalculate C1 now"; you type a new number into A1 and C1 changes. Even better, if you type into Z99, which nothing uses, nothing recalculates.

For that to work, the spreadsheet must have noticed that C1 reads A1 and B1. It keeps a little map: "A1 is used by C1". When A1 c

The solution is hidden so you can try first

12 min read · 11 sections

Read the code

VueThree writes, one render: watching track, trigger and batching happen

Open in playground

<script setup>
import { reactive, computed, watch, onUpdated } from "vue";

// reactive() wraps the object in a Proxy: reads are tracked, writes trigger.
const cart = reactive({ price: 12, qty: 1, coupon: "" });

// computed() is an effect too: it re-runs only when price or qty change.
const total = computed(() => {
  console.log("computing total");
  return cart.price * cart.qty;
});

// A watcher is a third kind of effect, scheduled before the next render.
watch(() => cart.qty, (q, old) => console.log(`watch: qty ${old} -> ${q}`));

onUpdated(() => console.log("DOM patched"));

function addThree() {
  // Three synchronous writes: Vue queues ONE watcher run and ONE render.
  cart.qty++;
  cart.qty++;
  cart.qty++;
  console.log("handler done, DOM still says:", document.querySelector("#total").textContent);
}
</script>

<template>
  <p id="total">{{ cart.qty }} x {{ cart.price }} = {{ total }}</p>
  <button @click="addThree">Add three</button>
  <input v-model="cart.coupon" placeholder="coupon (not used by total)" />
</template>

A 30-line toy track/trigger built on Proxy (plain Node)

// A 30-line toy version of Vue's track/trigger, to show the idea (not Vue's real code).
const targetMap = new WeakMap(); // target -> (key -> Set of effects)
let activeEffect = null;

function track(target, key) {
  if (!activeEffect) return;
  let deps = targetMap.get(target);
  if (!deps) targetMap.set(target, (deps = new Map()));
  let dep = deps.get(key);
  if (!dep) deps.set(key, (dep = new Set()));
  dep.add(activeEffect);
}
function trigger(target, key) {
  const dep = targetMap.get(target)?.get(key);
  if (dep) [...dep].forEach((fn) => fn());
}
function reactive(obj) {
  return new Proxy(obj, {
    get(t, k, r) { track(t, k); return Reflect.get(t, k, r); },
    set(t, k, v, r) { const ok = Reflect.set(t, k, v, r); trigger(t, k); return ok; },
  });
}
function effect(fn) {
  const run = () => { activeEffect = run; try { fn(); } finally { activeEffect = null; } };
  run();
}

const cart = reactive({ price: 12, qty: 2, note: "gift" });
effect(() => console.log(`total = ${cart.price * cart.qty}`));
cart.qty = 3;        // total depends on qty, so the effect re-runs
cart.note = "none";  // nothing read note, so nothing re-runs
cart.price = 10;

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.