v-if와 v-show의 차이점과 사용 방법

> VueJS에서 엘리먼트, 컴포넌트 등을 숨기는 방법은?

일반적으로 v-if 와 v-show를 사용한다.

 

> v-if와 v-show의 차이점은?

가장 큰 차이점은 실제 DOM을 그려주느냐의 여부에 따라 차이가 있다!

 

조건에 만족하지 않을 경우

v-if는 DOM 영역에 실제로 그려주지 않는(<! - - - >) 방법을 사용하는 반면,
v-show는 단지 css style의 display: none을 사용하여 보여주지만 않는다는 차이가 있다

 

이런 이유로 보여주거나 숨기는 액션이 반복되야 한다면 v-show를 사용하고
그 외의 경우는 v-if를 사용하는 방법이 성능에 더 좋을 것 같다.

 

 

v-if(v-else-if, v-else)

조건에 만족하면 Rendering 되지만

조건의 만족하지 않으면 DOM 레벨에서 제거되며, 모든 감시(Watch등...)도 제거된다.

또한, 컴포넌트라면 인스턴스가 제거되며 이 후 Rendering 할 때 모든 상태가 초기화 된다.

 

v-if는 내부에서 디렉티브 또는 컴포넌트를 많이 사용하는 경우,

특정한 데이터를 따로 가지고 있지 않다면 오류가 발생했을 때 v-if를 사용하는 것이 좋다.

 

ex) 로그인을 실시하여 성공하면 로그아웃 버튼이 생성 될 때, 비동기 처리로 불러온 값 처리의 따라 Rendering을 할 때

 

v-show

v-show는 display:none 처리를 하며 DOM 레벨에서 제거되지 않는 상태에서 내부적인 감시가 일어나므로 주의해야 한다.

 

내부에 디렉티브 또는 컴포넌트가 없고,  변경 빈도가 높은 경우에 v-show를 사용하는 것이 제일 좋다.

ex) dialog의 Open/Close 등

 

 

공식문서