v-show, v-if, 以及動態組件的區別

vue提供了v-if, v-show來動態顯示隱藏組件

同時也提供了<component>元素在一個掛載點上動態的切換組件, 通過 is 來決定哪個組件被渲染顯示

配合<keep-alive>使用時, 可以保留組件狀態避免重新渲染

　　[ 和v-show 比較的差別是 v-show 是一開始就渲染的所有組件 , 之后只是樣式的顯示與隱藏 ]

     <button 
         v-for="tab in tabs"
         :class="{active:currentTab==tab}"
         @click="currentTab=tab"
     >{{tab}}</button>
     <tab-posts v-show="currentTab=='Posts'"></tab-posts>
     <tab-archive v-show="currentTab=='Archive'"></tab-archive>

　　[ 和v-if 比較的差別是 v-if 切換一次就需要重新渲染一次組件 ]

<tab-posts v-if="currentTab=='Posts'"></tab-posts>
<tab-archive v-if="currentTab=='Archive'"></tab-archive>

　　[ 動態組件, 和v-if有些類似, 但是又不同, 顯示的時候, html上就有這個標簽, 隱藏的時候, 就不顯示在html上, 但是不會再次渲染組件 ]

     <keep-alive>
         <component :is="currentTabComponent"></component>
     </keep-alive>        

 computed:{
      currentTabComponent:function(){
          return 'tab-'+this.currentTab.toLowerCase();
      }
  },