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