특정 조건에 따라 엘리먼트를 표시하기 위한 방법이 두가지 있다.
v-if
와 v-show
겉으론 똑같이 동작하는데 뭐가 다를까?
한번 Araboza
<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>
<div v-show="isItA">
A
</div>
v-if
는 실제로 컴포넌트가 제거되고, 다시 생성됨
v-show
는 컴포넌트는 여전히 존재하지만 CSS의 속성만 변경됨 :display:none
실제 컴포넌트가 제거되기 때문에 v-if는 전환 비용이 높음!
런타임 시 특정 조건이 변경되지 않는다면 사용
내부에서 컴포넌트를 많이 사용하는 경우 사용
🌼 예시 : 로그인 성공 시 로그아웃 버튼이 생성될 때, 비동기 처리로 불러온 값에 따라 렌더링 할 때
v-show는 항상 렌더링이 되어 DOM에 남아있기 때문에 렌더링 초기 비용이 높음
무언가를 자주 전환해야 한다면 v-show 사용
내부에서 컴포넌트를 거의 사용하지 않는 경우
🌼예시 : Modal을 열거나 닫을 때 사용