Not the DOM Itself—But Its Shadow: Understanding How Vue Diffs the Virtual DOM

When something changes in Vue, it feels immediate.

A number updates.

A list reorders.

A condition flips.

And the DOM reflects it.

It’s tempting to imagine Vue reaching directly into the page and changing things as they happen.

But Vue doesn’t work that way.

It doesn’t operate on the DOM first.

It operates on a representation of it.

A Second Version of Reality

Every time your component renders, Vue creates a structure—a lightweight description of what the UI should look like.

Not actual DOM nodes.

Just objects that describe them.

Something like:

{
  type: 'p',
  children: '1'
}

When state changes, Vue creates another version:

{
  type: 'p',
  children: '2'
}

Now there are two versions of reality:

• what the UI was
• what the UI should become

And Vue’s job is not to rebuild everything—

but to transform one into the other.

The Question Is Not “What Changed?”

It’s:

“What is the cheapest way to get from here to there?”

This is where diffing begins.

When Nothing Really Changes

If two nodes share the same type:

<p>1</p> → <p>2</p>

Vue doesn’t replace the <p>.

It updates only what matters:

• the text content

The structure stays.

Only the detail shifts.

When Everything Changes

But if the type changes:

<p>A</p> → <span>B</span>

There’s nothing to reuse.

The meaning of the node itself is different.

So Vue replaces it entirely.

It doesn’t try to be clever where identity is lost.

Where It Gets Complicated: Lists

The real challenge appears when you render lists:

<li v-for="item in items" :key="item.id">
  {{ item.text }}
</li>

Now imagine:

• before: A B C
• after: B A D

Same items, different order.

And one new item.

Identity Becomes Everything

Vue doesn’t compare by position.

It compares by identity.

That’s what the key provides.

So Vue sees:

• A exists
• B exists
• C is gone
• D is new

Instead of rebuilding everything, it reuses what it can.

Moves what needs moving.

Creates what doesn’t exist.

Removes what no longer belongs.

The Invisible Optimization

But there’s another layer.

Vue tries to avoid unnecessary movement.

It looks for patterns—parts of the list that are already in the correct order.

And it keeps them in place.

Everything else adjusts around them.

You don’t see this happening.

But it’s why updates feel fast, even when lists grow large.

When Keys Go Wrong

If you remove keys—or use something unstable like an index—

Vue loses identity.

Now it falls back to position:

• first becomes first
• second becomes second

Even if the underlying data changed order.

So A might become B.

B might become A.

And the DOM gets reused in ways that don’t match reality.

Not broken—but subtly wrong.

Not Everything Is Compared

Vue doesn’t blindly diff everything.

It already knows parts of your template will never change.

Static content is skipped entirely.

Only dynamic pieces are considered.

So the work is reduced before it even begins.

A System of Cooperation

At this point, the system becomes clearer.

Reactivity decides when to update.

Rendering produces a new description.

Diffing decides what actually changes.

The DOM is just the final step.

A Final Thought

Vue doesn’t chase the DOM.

It rebuilds a shadow of it, compares that shadow to the previous one, and applies only the necessary changes.

What looks like instant updates is actually a careful negotiation—

between what was,

what is,

and what can stay the same.