Vue 动态组件 & 异步组件（is 、keep-alive、异步组件、处理懒加载）

动态组件 & 异步组件

动态组件 is+keep-alive

vue可以通过is来动态切换组件。

<component v-bind:is="currentTabComponent?currentTabComponent1:currentTabComponent2 "></component>
<button @click="currentTabComponent"> 切换 </button>

import currentTabComponent1 from './currentTabComponent1'
import currentTabComponent2 from './currentTabComponent2'
 components:{
  currentTabComponent:true
 }
data(){
 return {
 currentTabComponent:currentTabComponent1
  }
}
methods;{
 currentTabComponent(){
 this.currentTabComponent=!currentTabComponent
}
}

切换后的组件数据再重新切换回来数据还是会刷新为之前的，例如两个计算器组件一个已经计算了值为100切换为·另一个计算器组件时再切回来值会重置为0，如果想保存这个数据就可以使用keep-alive

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

这样就会将数据缓存起来无论切换多少次切换回去仍然为之前更改的数据

is不加v-bind的用法它可以解决html模板的限制。
例如：

 <ul>
  <li></li>
</ul>

成组件

 <ul>
  <li-list></li-list>
</ul>

但是html在渲染dom的时候，li-listt对ul来说并不是有效的dom，甚至会报错。
这个时候就可以使用is来解决这个问题

 <ul>
  <li is=“li-list”></li>
</ul>

• 其实就相当于，语义上是一样一样的，就是解决了html模板的限制。

  异步组件

  在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

  例如：
  我通过v-show 来控制lists组件的显示和隐藏我希望页面加载的时候不去下载这个lists的js，那么就可以通过异步组件来解决这个问题了。

  <li v-show='isli'>
     <lists />
  </li>
  <button @click="Lilist">切换</button>
  
  import 'lists' from './lists'
   components:{
    lists
   }
  data(){
   isli:false
  }
  methods:{
    Lilist(){
     this.isli=!this.isli
    }
  }
  

  来改造一下

  <li v-show='isli'>
     <lists />
  </li>
  <button @click="Lilist">切换</button>
  
  // import 'lists' from './lists'  这个时候就不在这里引入了
   components:{
    lists：（）=>import('./lists')
   }
  data(){
   isli:false
  }
  methods:{
    Lilist(){
     this.isli=!this.isli
    }
  }
  

  
  这个时候点击按钮显示的时候就会加载出这个lists
  我们来给他起个名字可以这样写。

   components:{
    lists：（）=>import(/*webpackChunName:'list'*/'./lists')
   }
  

  这样加载就是这样的了
  

  接下来我们可以定义一个异步组件工厂函数

  <li v-show='isli'>
     <lists />
  </li>
  <button @click="Lilist">切换</button>
  
  import 'LoadingComponent' from './LoadingComponent'
  import 'ErrorComponent' from './ErrorComponent'
  const AsyncComponent = () => ({
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: import( /*webpackChunName:'list'*/ './list'),
    // 异步组件加载时使用的组件
    loading: LoadingComponent,
    // 加载失败时使用的组件
    error: ErrorComponent,
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 3000
  })
  // import 'lists' from './lists'  这个时候就不在这里引入了
   components:{
    AsyncComponent 
   }
  data(){
   isli:false
  }
  methods:{
    Lilist(){
     this.isli=!this.isli
    }
  }
  

  这样当组件加载的时候就会加载loding组件内容，当加载成功后会积在list