When Should You Use v-if?

Instead of using v-if, it's sometimes more performant to use v-show instead:

<ComplicatedChart v-show="chartEnabled" />

When v-if is toggled on and off it will create and destroy the element completely. Instead, v-show will create the element and leave it there, hiding it by setting it's style to display: none.

Doing this can be much more efficient if the component you're toggling is expensive to render.

On the flip side, if you don't need that expensive component immediately, use v-if so that it will skip rendering it and load the page just a bit faster.

Want to level up your Vue skills?

With over two million reads and 11,067 subscribers, you've come to the right place.

Subscribe now to get exclusive insights and tips every week.