vue3 v-if / v-show

<template>
  <button @click="handler">
    click me!
  </button>
  <!-- <template v-if="isShow">  
     최상위 template 에는 v-if를 사용해서는 안된다 
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template> -->

  <h1 v-if="isShow">  
    <!--false인 경우 렌더링 X 
        전환 비용이 높다
        먼저 v-if를 사용하고 토글이 자주 일어난다면 v-show-->
    Hello?
  </h1>

  <h1 v-show="isShow">  
    <!--True, False 와 상관없이 렌더링은 O 
        초기 렌더링 비용이 높다-->
    Hello?
  </h1>
</template>