vue에서 v-if, v-show 차이점

vue를 공부하면서 show, if에 대해서 차이점이 궁금했다.

이름대로 show는 스타일을 통해서 보여지는 부분이 가려진다고 보면 될것 같다.

 

v-if vs v-show

- v-if, v-show 는 모두 조건부 렌더링을 처리하는데 사용

 

v-if

- 조건이 참일 때 해당 요소를 렌더링하고, 조건이 거짓이면 요소를 DOM에서 완전히 제거

- v-if는 조건에 따라 요소가 생성되거나 제거된다.

- 표시 여부가 자주 변경되면 성능상에 부담이 있을 수 있다. 그러나 DOM에서 완전히 사라지기 때문에 메모리 사용량은 감소한다.

- 렌더링 횟수가 많이 변경되는 경우 사용하기 적합

 

v-show

- 조건에 따라 css의 display 속성을 조작하ㅕ 요소를 보이거나 숨긴다.

- 요소는 항상 DOM에 존재하며, 단순히 화면에서 표시되지 않을 뿐이다.

- DOM에 존재하기 떄문에 메모리 사용량은 v-if 보다 더 많을 수 있다.

- 렌더링 횟수가 상대적으로 적은 경우, 자주 토글되는 경우 적합

<template>
  <div>
    <button @click="toggleContent">더 보기</button>
    <p v-show="showContent">추가 콘텐츠입니다.</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showContent = ref(false);

    const toggleContent = () => {
      showContent.value = !showContent.value;
    };

    return {
      showContent,
      toggleContent
    };
  }
};
</script>