v-if**는 토글 비용이 더 높지만(요소와 컴포넌트를 생성/파괴하고 매번 라이프사이클 훅을 실행) 조건이 거짓일 때는 비용이 전혀 없습니다(아무것도 렌더링되지 않음).v-show**는 초기 비용이 더 높지만(숨겨져 있어도 항상 렌더링) 토글이 저렴합니다(단순한 CSS 변경).자주 토글됨 (탭, 드롭다운) → v-show (전환이 저렴)
거의 변하지 않음 / 렌더링 안 될 수도 → v-if (렌더링을 완전히 건너뜀)
비용이 큰데 거의 표시 안 됨 → v-if (구축 비용을 지불하지 않음)
<template>
<p v-if="status === 'loading'">Loading...</p>
<p v-else-if="status === 'error'">Error!</p>
<p v-else>Done</p>
</template>
v-if는 v-else-if/v-else 체인을 지원하지만, v-show는 지원하지 않습니다(하나의 요소만 토글).
v-show는 <template> 래퍼에서 동작하지 않습니다(display를 설정할 요소가 없음). v-if는 동작합니다.
올바른 선택은 실질적인 성능 결정입니다. 자주 토글되는 것에는 v-show(DOM이 유지되어 전환이 저렴), 조건적/드물거나 비용이 큰 것에는 v-if(필요할 때까지 렌더링하지 않음)를 사용합니다.
잘못 선택하면 — 예를 들어 평소 숨겨져 있는 무거운 콘텐츠에 v-show를 쓰면 — 렌더링 작업을 낭비하게 됩니다.