Vue & Nuxt Tips
·
38 views
During toggles, v-if entirely creates and destroys the element, including event listeners and child components:
<template>
<MyComponent v-if="showComponent" />
</template>
v-show creates the element and only toggles its visibility using CSS.
<template>
<MyComponent v-show="showComponent" />
</template>
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.
