What is the difference between v-if and v-show in Vue?
Quick Answer
v-if adds or removes the element (and its component, listeners, child components) from the DOM entirely — higher toggle cost, zero cost when hidden. v-show always renders the element and just toggles display: none — cheap to toggle, always in the DOM. Use v-show for things toggled often, v-if for things rarely shown or expensive to render.
v-if genuinely mounts and unmounts the element and its component when the condition changes — lifecycle hooks fire, and if it's false to begin with nothing renders at all. v-show always renders it and just flips display: none. So v-if is cheaper when the thing is usually hidden or expensive to build, and v-show is cheaper when you're toggling it a lot, like switching tabs, because there's no re-render, just a CSS change.
v-ifis “real” conditional rendering — the component is destroyed and re-created on toggle, lifecycle hooks fire, and if the condition starts false nothing is rendered or initialised.v-showdoesn't support<template>and can't be used withv-else.v-if+v-foron the same element is discouraged (v-ifhas higher priority in Vue 2, lower in Vue 3) — wrap or filter instead.- A tab panel you switch between constantly →
v-show. An admin-only section most users never see →v-if.