[vue.js] v-if, v-show 차이점, 사용해야 할 타이밍

v-if

조건을 만족하면, 그 순간 html 블록이 생긴다.

조건을 만족하지 않으면 html 삭제된다.

해당 토큰이 일어날때, v-show 보다 더 많은 자원을 사용하게 됩니다.

생성-삭제 반복

 

v-show

조건 만족 여부에 상관없이 html 블록이 미리 생성됩니다.

조건을 만족하면 css display를 이용해서 화면에 보이게 됨.

조건을 만족하지 않으면 화면에서 숨겨집니다.

 

-->두 가지 방식은 렌더링 방식이 다릅니다. 

결론적으로

• 해당 html 블록이 화면내에 자주 toggle이 일어나면, v-show
• toggle이 일어나는 빈도가 적다면 v-if가 적합합니다.
  

현업에서 사용할때는 사실 정신이 없어서, 고려를 하지 않는 사항..

코드 퀄리티를 생각하면 확실히 기억해둬야하는 부분입니다ㅠㅠ^^맨날 까먹어서 여기 기록해둡니다..