v-if 와 v-show 성능 차이점

Vue에서 v-if와 v-show 디렉티브가 있습니다.

디렉티브란 라이브러리에서 DOM 엘리먼트가 무언가를 수행하도록 지시하는 특수한 속성입니다.

    <!-- v-if -->
    <h2 v-if="show">v-if</h2>
    
    <!-- v-show -->
    <h2 v-show="show">v-show</h2>

 

공통점

두 가지 모두 조건에 따라서 화면에 렌더링 할 수 있는 디렉티브입니다.

 

차이점 

v-if 는 조건이 참이면 렌더링을 하고 거짓이면 아무 동작을 하지 않습니다.

v-show는 조건에 따라서 display 속성을 이용하여 보이거나, 숨깁니다.

 

성능 차이

v-if는 실제로 화면을 렌더링을하고, 다시 지우고 해서 토글 비용이 높습니다.

반면에 v-show는 초기에 화면을 렌더링 할 때 비용이 높습니다.

 

무언가를 자주 토글을 해야하는 경우에는 v-show를 사용하고,

조건이 자주 변경될 가능성이 낮은 경우에는 v-if를 사용하는 것이 좋습니다.

	조건 true	조건 false	토글 비용	초기 비용
v-if	화면에 렌더링	아무것도 하지 않음	높음🔼	낮음🔽
v-show	display: block	display: none	낮음🔽	높음🔼

따라서 필요에 따라 선택해서 사용하면 됩니다.

 

Vue 조건문 v-if v-else v-else-if