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.