动态组件切换及其Vue提供的is属性和keep-alive高性能组件

动态组件

1. 什么是动态组件？
   可以改变的组件
2. 使用
   通过 Vue 提供了一个 component + is 属性
3. 动态组件指的就是 component这个组件
4. 案例

   <div id="app">
      <button @click = "change"> 切换 </button>
      <keep-alive include="">
         <component :is = "type"></component>
      </keep-alive>
   </div>
   

     Vue.component('Aa',{
         template: '<div> Aa </div>'
      })
   
      Vue.component('Bb',{
         template: '<div> Bb </div>'
      })
   
      new Vue({
         data: {
            type: 'Aa'
         },
         methods: {
            change () {
            this.type = (this.type === 'Aa'?'Bb':'Aa')
            }
         }
      }).$mount('#app')
   

5. Vue提供了一个叫做 keep-alive 的组件可以将我们的组件进行浏览器缓存，这样当我们切换组件时，就可以大大提高使用效率
6. keep-alive也可以以属性的形式呈现，但是我们如果搭配component的话，建议使用组件的形式

---------------------------------------------若有疑虑详见Vue进阶Day02