vue 3 - v-if, v-show

😎 vue 3 - v-if, v-show

composition API를 기준으로 합니다

✅  v-if

v-if, v-else-if, v-else를 통해 조건부 렌더링이 가능하며 디렉티브 별로 형제 블럭이면서 인접해야 한다

<div v-if="text === 'A'">
  A
</div>
<div v-else-if="text === 'B'">
  B
</div>
<div v-else-if="text === 'C'">
  C
</div>
<div v-else>
  A/B/C 모두 아님
</div>

const text = ref("D")

// 아래와 같이 렌더링된다
<div> A/B/C 모두 아님 </div>

 

✅  v-show

엘리먼트를 조건부로 표시하는 다른 옵션이며 사용법은 v-if와 대체로 동일하다

<div v-show="show">v-show!</div>

const show = ref(false)

// 아래와 같이 랜더링된다
<div style="display: none;">v-show!</div>

v-show의 엘리먼트는 항상 렌더링 되면서 DOM에 남아 있고 display CSS 속성으로 전환한다

 

✅  v-if vs v-show

v-if

v-if는 실제 조건부 렌더링으로 사용한다
조건에 맞는 경우에만 엘리먼트를 렌더링하며 초기 조건이 false라면 아무 작업도 수행하지 않는다
즉, 조건이 true가 될 때까지 렌더링되지 않는다

v-show

이에 비해 v-show는 방식이 훨씬 간단하다
엘리먼트는 CSS의 display 속성 기반으로 전환되며 초기 조건과 관계없이 항상 렌더링된다
즉, 엘리먼트는 항상 렌더링되며 css로 제어한다

Q. 어떤 상황에서 어떤 것을 사용할까?

일반적으로 v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높다
따라서 자주 전환해야 하는 경우(ex- Toggle) v-show를 사용하고,
실행 중에 조건이 변경되지 않는 경우 v-if를 사용하는 것이 성능면에서 효율적이다

 

 

 

https://v3-docs.vuejs-korea.org/guide/essentials/conditional.html

조건부 렌더링 | Vue.js