juniorVue.js
Explain the difference between v-if and v-show.
Updated May 4, 2026
Short answer
v-if is conditional rendering (DOM removal); v-show is conditional display (CSS display: none).
Deep explanation
v-if is 'real' conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles. It is also lazy: if the condition is false on initial render, it does nothing. v-show is much simpler—the element is always rendered and remains in the DOM; Vue simply toggles the CSS display property.
Real-world example
Use v-if for expensive components like large data tables that aren't always needed. Use v-show for frequently toggled UI elements like tabs or accordions.
Common mistakes
- Using `v-if` on an element that toggles every second, leading to high CPU usage for DOM reconstruction.
Follow-up questions
- Which one has a higher initial render cost?