V-If and V-show Image

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

In here we learn why using v-if and v-show is important to toggle heavy components in vue.

2 min read

November 22nd, 2024

Nick Mousavi

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

Conditional.vue
  <template>
  <div v-if="isRendered">
    <div v-show="isVisible">
      <MyHeavyComponent/>
    </div>
  </div>
  </template>

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

Tags:VueNuxt
Nick Mousavi
A small step forward is still progress.

To get in touch with Nick Mousavi,
please enter your email address below.

© 2020-present Nick Mousavi. All Rights Reserved.

Privacy Policy