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.

Heroku

Amplify your impact where it matters most — building exceptional apps.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

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.

Sentry image

Make it make sense

Only get the information you need to fix your code that’s broken with Sentry.

Start debugging →