Vue.js , v-show vs v-if 차이

v-show

v-show는 CSS의 display: none;을 이용해 컴포넌트를 숨긴다.

즉, DOM에는 남아 있지만, 화면에 보이지 않도록 설정된다.

<template>
  <button @click="isVisible = !isVisible">토글</button>
  <p v-show="isVisible">이 문장은 v-show로 제어됨</p>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(true);
</script>

v-show vs v-if 차이점

기본 작동 방식

v-if:

• 조건이 false일 때 DOM에서 요소를 완전히 제거한다.
• 전환 시 요소를 새로 생성하거나 제거한다.
• 템플릿 블록 내부의 이벤트 리스너와 자식 컴포넌트가 제거되고 다시 생성된다

v-show:

• 항상 DOM에 렌더링되지만, 조건이 false일 때 display: none CSS 속성을 통해 숨김 처리한다.
• 초기 렌더링 비용이 더 높지만 전환 비용은 더 낮다.

언제 무엇을 사용할까?

v-if 사용 시기:

• 조건이 런타임에 자주 변경되지 않을 때
• 초기 로딩 성능이 중요할 때
• 조건부 콘텐츠에 무거운 컴포넌트가 포함된 경우
• 보안상 민감한 정보를 완전히 제거해야 할 때

v-show 사용 시기:

• 조건이 자주 변경될 때 (토글이 많은 UI)
• 초기 렌더링 비용을 지불하더라도 빈번한 전환이 필요할 때
• 복잡한 컴포넌트를 자주 토글할 때

 

 

즉, v-show로 숨겨진 컴포넌트는 메모리에 남아 있으며, 라이프사이클 훅 (mounted, unmounted)이 다시 실행되지 않는다

반면, v-if는 컴포넌트를 완전히 제거했다가 다시 만들기 때문에 성능 차이가 발생한다.