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();
      }
  },