When Something Is Hidden vs When It Doesn’t Exist: Understanding v-show in Vue

At a glance, hiding something in a UI feels simple.

You either show it… or you don’t.

So when you see this:

<p v-if="isVisible">Hello</p>

It feels like the natural solution.

If it’s visible, render it.

If not, don’t.

But there’s a subtle detail hiding underneath that simplicity.

Because v-if is not actually “hiding” anything.

It’s removing it entirely.

The Difference You Don’t See

When isVisible becomes false, Vue doesn’t just make the element invisible.

It removes it from the DOM.

It’s gone.

And when it becomes true again, Vue creates it from scratch.

So every toggle is not just a visual change.

It’s a structural change.

A Different Kind of Control

Now consider this:

<p v-show="isVisible">Hello</p>

At first, it looks identical.

But the behavior is completely different.

When isVisible is false, Vue doesn’t remove the element.

It simply applies:

<p style="display: none;">Hello</p>

The element is still there.

It just can’t be seen.

Two Ways to Think About It

At this point, the distinction becomes clearer.

v-if answers the question:

“Should this exist?”

v-show answers a different one:

“Should this be visible?”

That difference is small in code.

But very real in behavior.

The Cost of Toggling

Now imagine a piece of UI that toggles frequently.

A dropdown.

A tooltip.

A modal.

With v-if, every toggle means:

• create the element
• mount it
• destroy it
• repeat

With v-show, the element is created once.

After that, toggling is just:

• show
• hide
• show
• hide

No reconstruction.

No lifecycle restart.

Just a change in visibility.

When Each One Makes Sense

This leads to a natural trade-off.

If something might never appear, or appears rarely, v-if makes sense.

You avoid rendering it entirely until needed.

If something toggles often, v-show is usually better.

You pay the cost once, then reuse it.

Neither is “better”.

They optimize for different situations.

The Hidden Consequence

There’s another detail that often goes unnoticed.

Even when hidden, elements controlled by v-show still exist.

That means:

• they take up memory
• they run lifecycle hooks
• they can still be referenced

So “hidden” does not mean “inactive”.

It only means “not visible”.

A Subtle Example

Consider this:

<div v-show="false">
  <HeavyComponent />
</div>

Even though it’s hidden, HeavyComponent is still created.

It still mounts.

It still runs its logic.

Because v-show never prevents rendering.

It only affects display.

A Shift in Perspective

At first, it’s easy to group v-if and v-show together.

They both control whether something appears.

But they operate at completely different levels.

v-if works at the structure level.

It changes what exists in the DOM.

v-show works at the presentation level.

It changes how something is displayed.

And that difference affects everything that follows.

The Bigger Insight

v-show exists because not every change in UI needs a structural update.

Sometimes, you don’t need to rebuild anything.

You just need to toggle visibility.

And doing less work is often the better choice.

A Small Detail That Changes Behavior

At first, v-show feels like a minor alternative.

A convenience.

But once you understand what it actually does, it becomes something else.

A tool for controlling how much work your UI performs.

Because in the end, the real question isn’t:

“Should this be shown?”

It’s:

“Should this exist at all… or just be hidden?”