DEV Community

Nick Mousavi
Nick Mousavi

Posted on • Originally published at biomousavi.com

5 2 2 2 1

Why you should use both v-if and v-show to toggle heavy components in Vue ?

Difference between v-if and v-show

If you are a Vue.js developer, you might know what's the difference, if not, let's check:

v-if: to Render a block conditionally.

v-show: to Display a block conditionally.

v-show renders once and remains in the DOM and only toggles the display CSS property.

That means if you have a heavy component and rendering is expensive, you can render it once(v-if) and toggle that 💯 times without re-rendering(v-show).

Example

  <template>
  <div v-if="isRendered">
    <div v-show="isVisible">
      <MyHeavyComponent/>
    </div>
  </div>
  </template>
Enter fullscreen mode Exit fullscreen mode

If we only use v-show, we don't have control on rendering and it will be rendered immediately(not displaying) without any conditions.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (2)

Collapse
 
laerciolopesll profile image
LaercioLopesLL

Oh yes, I already do that, and this is very important, especially when you have a component that makes requests in the mount hook and other lifecycle hooks.

Collapse
 
biomousavi profile image
Nick Mousavi • Edited

Thank you for sharing your experience ✌️😀

And if you combine that with Async Components (lazy components), you also have control over loading and rendering components.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay