对于keep-alive和 Async Components的理解

参照Vue.js：
https://cn.vuejs.org/v2/api/#keep-alive
https://vuejs.org/v2/guide/components-dynamic-async.html?#Handling-Loading-State

keep-alive
希望组件的实例（例如在切换选项卡的时候）在首次创建后就被缓存
这个时候就可以使用<keep-alive>
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>
keep-alive会缓存不活动的组件实例
主要用于保留组件状态或避免重新渲染
Props：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。
keep-alive自身不会渲染dom元素，也不会出现在组件的父组件链中
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行
Async Components
 如果我们在项目中需要异步请求成功之后再去加载这些组件，就可以使用 Async Components
 具体例子参照vue.js文档
 

```c
个人觉得Async Components最有用的
2.3.0+中的新功能 异步组件返回的对象
const AsyncComponent = () => ({
  // 要加载的组件
  component: import('./MyComponent.vue'),
  // 加载中使用的组件
  loading: LoadingComponent,
  // 加载失败使用的组件
  error: ErrorComponent,
  // 在显示组件之前延迟的秒数. 默认: 200ms.
  delay: 200,
  // 加载超出多少时间会显示错误的组件
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})