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

Difference between

Copyv-if

and

Copyv-show

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

Copyv-show

renders once and remains in the

CopyDOM

and only toggles the

Copydisplay

CSS property.

That means if you have a heavy component and rendering is expensive, you can render it once(

Example

  <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.