v-if vs v-show

uoayop·2021년 10월 6일
1

Vue

목록 보기
4/4
post-thumbnail

특정 조건에 따라 엘리먼트를 표시하기 위한 방법이 두가지 있다.

v-ifv-show

겉으론 똑같이 동작하는데 뭐가 다를까?

한번 Araboza


v-if

  • 조건에 따라 블록을 렌더링한다.
  • v-else-if, v-else와 함께 사용 가능하다.
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show

  • v-if와 동일하게 조건에 따라 블록을 렌더링한다.
<div v-show="isItA">
  A
</div>

차이점

v-if실제로 컴포넌트가 제거되고, 다시 생성됨

v-show 는 컴포넌트는 여전히 존재하지만 CSS의 속성만 변경됨 : display:none

v-if

실제 컴포넌트가 제거되기 때문에 v-if는 전환 비용이 높음!

  • 런타임 시 특정 조건이 변경되지 않는다면 사용

  • 내부에서 컴포넌트를 많이 사용하는 경우 사용

    🌼 예시 : 로그인 성공 시 로그아웃 버튼이 생성될 때, 비동기 처리로 불러온 값에 따라 렌더링 할 때

v-show

v-show는 항상 렌더링이 되어 DOM에 남아있기 때문에 렌더링 초기 비용이 높음

  • 무언가를 자주 전환해야 한다면 v-show 사용

  • 내부에서 컴포넌트를 거의 사용하지 않는 경우

    🌼예시 : Modal을 열거나 닫을 때 사용

profile
slow and steady wins the race 🐢

0개의 댓글