DEV Community

Nick Mousavi
Nick Mousavi

Posted on • Originally published at biomousavi.com

7 2 3 2 2

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.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

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

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay