[vue] v-if와 v-show의 차이점 , vue3에서 v-if와 v-show

 
 
 목차

• v-if란
• v-show란
• vue3에서 v-show사용시 주의할점
• v-if와 v-show 중 어떤것을 쓰는것이 좋을까?\

 

요약: v-if와 v-show의 가장 큰 차이점은 v-if는 조건이 맞지않으면 아예 랜더링 하지않고  v-show는 조건에따라 css 로  display: block/ display: none처리가 됩니다.

 
 

1. v-if

---

v-if="조건"으로 쓰면 조건의 참, 거짓 결과값에 따라 요소를 표시할지 안할지 결정할 수 있습니다. 
여러가지 요소를 표시/표시하지않음 으로 한꺼번에 하고 싶으면 아래와 같이 wrapper에 v-if를 주면 됩니다. 
 

<!-- 단일요소 -->

<div> 
    <span v-if="type ==='text'">안뇽</span>
</div>

<!-- 여러요소 한번에 숨기기 -->
<!-- wrapper div가 있으면 div에  딱히 div가 필요없다면 <template>태그에 v-if를 사용해도됩니다. -->
<div v-if="보여주기 만들 조건문">
  <h1>title</h1>
  <p>...</p>
</div>

 
 
 
 

2. v-show

---

v-show는 v-if와 동일하게 화면에 보여주냐 안보여주냐를 조건문 값을통해 결정할 수 있는데 
v-if와 차이점은 요소가 항상 DOM에 유지되는 것 입니다.  즉 v-show는 DOM에 유지되어있지만 
조건값에따라 css 스타일이  display: block 아니면 display: none 됩니다. 
 

<!-- 위 v-show는 아래처럼 동작합니다. -->
<div v-show="조건문 true일때">나왓습니다 </div>

<div style="display: block">나왔습니다 </div>

 
 
 
 

3. vue3에서 v-if, v-show쓸때 주의사항

---

vue2에서는 <template>안에 단일 root element 와야 했었습니다.
예를들어
 

<!-- vue2에선 아래와 같이 작성하면 안됬었습니다 -->

<template>
  <h1>...</h1>
  <p>...</p>
<template>


<!-- vue2에선 이런식으로 작성을 해야합니다. -->
<template>
 <div>
   <h1>...</h1>
   <p>...<p>
 </div>

 
하지만 vue3에서는 <template>안에 태그가 다중root element가 와도 가능합니다. 
 
그런데, v-show를 쓸때 위에 설명과 같이 DOM에 유지되므로 하나의 wrapper로 묶여있지 않으면 동작을 하지 않습니다.

<!-- parent.vue -->
<template>
  <ChildCompo v-show="조건문 true"/> <!--동작 X -->
  <ChildCompo v-if="조건문 true"/> <!--동작 O -->

</template>

<!-- childCompo.vue -->
<template>
  <h1>...</h1>
  <p>...</p>
  <p>...</p>
</template>

<script setup>
  import ChildCompo from '....경로';
</script>

childCompo에 요소들은 이미 DOM에 유지되고있기 떄문에 세가지 태그중 어떤 태그를 display: block/none처리 해야되는지 콕찝어지지 않아 동작을 안한다고 합니다. 
 
그래서 방법은 v-if를 사용하거나
아니면 childCompo안에 요소들을 하나의 wrapper로 묶어주면 정상적으로 동작하는 것을 볼 수 있습니다.

<!-- parent.vue -->
<template>
  <ChildCompo v-show="조건문 true"/> <!--동작 O -->
</template>

<!-- childCompo.vue -->
<template>
<div>
  <h1>...</h1>
  <p>...</p>
  <p>...</p>
<div>
</template>

<script setup>
  import ChildCompo from '....경로';
</script>

 

4. v-if와 v-show중 어떤것을 쓰는 것이 좋을까?

---

 v-if는 초기 표시 코스트가 낮은 대신에 SPA상에서 표시 전환을 위한 코스트가 비쌉니다. v-if는 전환할때 블록 내부의 컴포넌트들이 제거되고 다시 생성되기 때문입니다. 
 
이에비해 v-show는 간단합니다. 엘리먼트를 css 기반으로 전환되어 초기 조건과 관계없이 항상 렌더링 됩니다. 
 
v-if는 전환비용이 높은 반면(생성하고 지우고 다시 생성하므로), v-show는 초기렌더링 비용이 높습니다.
그러므로 전환 빈도가 높으면 v-show를 사용하는게
좋고, 전환빈도가 낮고, 런타임시 조건이 변경되지 않는다면  v-if를 사용하는게 좋다고 합니다.
 
다만 v-show의 경우 일부 브라우저에서 작동 하지 않는 경우가 잇는데, 브라우저 사양을 잘 보고 사용해야합니다. (거진 왠만하면 다 될꺼에요.!)

 
 
 
 
 
 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡