Vue v-if vs v-show

Vue 컴포넌트에서 조건에 따라 랜더링하는 방법은 v-if 디렉티브와 v-show 디렉티브를 사용하는 방법이 있습니다.

v-if

<h1 v-if="condition">condition이 true이면, h1 블록이 화면에 보임 </h1>
<h1 v-else="condition">condition이 false, h1 블록이 화면에 보임 </h1>

v-show

<h1 v-show="condition> condition이 true이면, h1 블록이 보임</h1>

공통점

둘 다 조건에 따라 조건이 부합하면 화면에 보이고,
부합하지 않으면 안보이는 조건성 컴포넌트 입니다.

차이점

랜더링 방식

v-if는 조건이 만족되는 순간 html 블록이 생성되고, 조건이 불만족 시, html 블록이 삭제됩니다.
v-show 는 조건의 만족여부와 상관없이 무조건 html 블록이 생성되고, 조건 만족 시, css의 display를 통해 화면에 보입니다.

따라서, v-if는 실제로 해당 블록 전체를 조건에 따라 생성하고 삭제하기 떄문에 해당 블록이 toggle 될 때, v-show보다 더 많은 자원을 사용합니다.
반면 v-show는 조건과 상관없이 무조건 생성 후 조건에 따라 보임, 숨김 처리되는 것이기에 제일 처음에 html 블록을 무조건 생성한다는 단점이 있습니다.

언제 어떤 것을 쓰는게 더 나은가?

• toggle 많다 -> v-show
• toggle 적다 -> v-if