Vue.js: What is the difference between v-if and v-show performance?

v-if — DOM manipulation. v-show — CSS toggle.

Performance comparison:

• v-if — higher toggle cost.
• v-show — higher initial cost.
• v-if — lower memory.
• v-show — higher memory.

1<template>
2    <!-- v-if: adds/removes from DOM -->
3    <div v-if="show">Expensive component</div>
4    
5    <!-- v-show: toggles CSS -->
6    <div v-show="show">Expensive component</div>
7</template>

When to use:

• v-if — rarely changes.
• v-show — frequently toggles.