When Not Rendering Is Faster: Understanding v-memo in Vue

There’s a point where optimization in Vue stops being about updating efficiently…

and starts being about not updating at all.

Because even when Vue is fast, every update still has a cost.

A render function runs.

A virtual DOM is created.

A comparison happens.

And most of the time, Vue is smart enough to skip unnecessary DOM changes.

But what if you could go one step earlier?

What if you could skip the entire process?

That’s where v-memo enters.

The Cost of “Nothing Changed”

Even when data hasn’t changed, Vue still has to check.

It runs the render function.

Builds a new virtual DOM.

Compares it with the previous one.

And only then decides:

“Nothing to update.”

This is already efficient.

But it’s still work.

And in certain cases—large lists, complex components—that work adds up.

Skipping the Check Entirely

v-memo introduces a different idea.

Instead of letting Vue figure out whether something changed…

you tell Vue what to watch.

<div v-memo="[count]">
  {{ count }}
</div>

Now Vue doesn’t blindly re-render this part of the template.

It first checks the dependency you provided.

If count is the same as before—

it skips everything.

No render.

No diff.

No DOM work.

It doesn’t even try.

A Layer Before Optimization

This is what makes v-memo interesting.

Vue already optimizes rendering through:

• batching updates
• virtual DOM diffing
• static analysis

But all of those happen after rendering begins.

v-memo works earlier.

It prevents rendering from happening in the first place.

Where This Starts to Matter

In small components, you’ll never notice the difference.

Vue is already fast enough.

But in larger structures—especially lists—the cost becomes more visible.

<div
  v-for="item in list"
  :key="item.id"
  v-memo="[item.id === selectedId]"
>
  {{ item.name }}
</div>

Here, only the items affected by selectedId will re-render.

Everything else is skipped entirely.

Not compared.

Not re-evaluated.

Just left untouched.

Not Automatic—And That’s Intentional

Unlike watchEffect, v-memo does not track dependencies automatically.

You must define them explicitly.

This might feel inconsistent at first.

But it’s deliberate.

Because this is not about convenience.

It’s about control.

Vue cannot safely assume which parts are safe to skip.

That decision belongs to you.

Not a Default Tool

It’s tempting to see v-memo as something you should always use.

But in most cases, you shouldn’t.

Vue already handles rendering efficiently.

Adding v-memo where it’s not needed can make code harder to read without meaningful benefit.

It’s not a replacement for Vue’s system.

It’s an override.

A Different Kind of Optimization

Most of Vue’s optimizations answer:

“What changed?”

v-memo answers a different question:

“Should we even check?”

That distinction is subtle.

But powerful.

A Shift in Perspective

Instead of thinking:

“Let Vue figure it out”

You begin thinking:

“I know this part doesn’t change—skip it”

It’s a shift from trust to intention.

From automatic behavior to manual control.

A Final Thought

Vue is already optimized for most applications.

But sometimes, performance isn’t about making things faster.

It’s about doing less work altogether.

And v-memo is one of the rare tools that lets you say:

“Don’t even start.”

Because sometimes, the fastest update—

is the one that never happens.