Javascript is required
ยท
0 min read

Vue Tip: When to Use v-if

Vue Tip: When to Use v-if Image

During toggles, v-if entirely creates and destroys the element, including event listeners and child components:

1<template>
2  <MyComponent v-if="showComponent" />
3</template>

v-show creates the element and only toggles its visibility using CSS.

1<template>
2  <MyComponent v-show="showComponent" />
3</template>

Info

Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often and v-if if the condition is unlikely to change at runtime.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.