1. 动态组件

通过component占位 , is属性用来代表组件注册时的名字。

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

2. 异步组件

当组件被需要时渲染

动态导入组件

//缩写
new Vue({  
   // ...  
   components: {  
    'my-component': () => import('./my-async-component')  
  }  
})

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})