Vue组件切换时缓存组件状态即动态组件keep-alive 动态组件与异步组件

1. keep-alive缓存组件状态

<!-- keep-alive 包裹的组件将会被缓存！即B组件中更改内容，切换回A组件页面，再切换回B组件，是之前缓存的状态，而不是生成了新的B组件实例-->
<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

data(){
    
    return{
    
      currentComponent:AComponent
    }
  },
 methods:{
    
    huanHandle(){
    
      this.currentComponent = this.currentComponent === AComponent ? BComponent : AComponent
    }
  },
 components: {
    
    AComponent,
    BComponent
  }

2. 参数

include： 只缓存某个组件
exclude：除某个组件外其他组件缓存
max：最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

<!-- 只缓存B组件 -->
<keep-alive include="BComponent"> 
  <component :is="currentTabComponent"></component>
</keep-alive>

<!-- 不缓存B组件，缓存其他组件 -->
<keep-alive exclude="BComponent"> 
  <component :is="currentTabComponent"></component>
</keep-alive>

<!-- 最多缓存10个组件，有新的组件时，最早的组件状态会被销毁掉 -->
<keep-alive :max="10"> 
  <component :is="currentTabComponent"></component>
</keep-alive>

3. 异步组件

加载组件时，所有的组件从打开网页那一刻都加载的话网页会出现卡顿，所以一些组件可以采取异步加载的形式，需要的时候再由系统内部自行进行加载。

// 一打开网页就加载
import BComponent from './components/BComponent.vue' 

// 异步加载
const BComponent = () => import('./components/BComponent.vue')

4. 加载异步组件同时可以有更多配置

const AsyncComponent = () => ({
    
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件 --- 比如等待时，可以先加载一个等待页面
  loading: LoadingComponent, 
  // 加载失败时使用的组件 --- 比如失败时，可以先加载一个错误页面
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)--- 代表权重，先加载1000，再加载2000的组件
  delay: 200, 
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})