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:
Vue Tip: Avoid Empty Wrapper for Conditions
There are many situations when you need to conditionally display multiple Vue components. To avoid "empty" wrappers you should use not use HTML tags.
Vue Tip: Use Vue App Instance as Global Store
Vue provides an object that can be used to register global properties that can be accessed on any component instance inside the application.