//父組件App中
<template>
  <div v-cloak class="App">
    <button v-for="(item, index) in arr" :key="index" @click="()=>msg=item">點擊切換box{{index+1}}組件</button>
    <component :is="msg"></component>
  </div>
</template>
<script>
  import box1 from "./components/box1.vue"
  import box2 from "./components/box2.vue"
  import box3 from "./components/box3.vue"
  export default {  
    data() {
      return {
        msg: 'box1',
        arr:['box1', 'box2', 'box3']
      }
    },
    components: {
      box1,
      box2,
      box3
    },
  }

//子組件box1中
<template>
        <div>
            <h1>box1組件中</h1>
        </div>
</template>
//子組件box2中
<template>
<div>
    <h1>box2組件中</h1>
</div>
</template>
//子組件box3中
<template>
    <div>
      <h1>box3組件中</h1>
    </div>
</template>

//默認全部組件緩存
<keep-alive>
     	<components :is="msg"></components>
 </keep-alive>

<keep-alive :include="/box2|box3/">  //匹配bo2和box3組件緩存
        <component :is="msg"></component>
    </keep-alive>

    <keep-alive exclude="box2">
        <component :is="msg"></component>
    </keep-alive>

    <keep-alive :max="2">
        <component :is="msg"></component>
    </keep-alive>

//1 全局：
 Vue.component('component-name',function(resolve){
 //require 語法告訴 webpack自動將編譯后的代碼分割成不同的塊
 //這些塊將通過 Ajax 請求自動下載
   require(['./my-async-componnet'],resolve)
 })
 //注冊全局組件名，但只有一個名字，沒有實體，相當于空的
//當需要這個組件時，調(diào)用上面的工廠函數(shù)，觸發(fā)webpack的異步加載模塊方法
//然后異步請求一個模塊，請求成功后，這個模塊內(nèi)容即為組件實體部分，并對應地方渲染，加載內(nèi)容也緩存下來。
//2 局部
 new Vue({
   components: {
        'component-name':function(resolve) {
           require(['./my-async-component'], resolve)
        }
   }
 })

//1 全局：
Vue.component('component-name',
 （）=> import('./my-async-componnet')//這個 `import` 函數(shù)會返回一個 `Promise` 對象,不要問我為什么,人家webpack這樣設計的。
 )
//2 局部：
 new Vue({
   components: {
       'component-name': () =>  import('./my-async-componnet')//這個 `import` 函數(shù)會返回一個 `Promise` 對象。
   }
 })

//工廠對象可以返回一個如下對象，對象里面的一些配置參數(shù)
const AsyncComponent = () => ({
  // 需要加載的組件 (這個 `import` 函數(shù)會返回一個 `Promise` 對象。)
  component: import('./MyComponent.vue'),
  // 異步組件加載時使用的組件
  loading: LoadingComponent,
  // 加載失敗時使用的組件
  error: ErrorComponent,
  // 展示加載時組件的延時時間。默認值是 200 (毫秒)
  delay: 200,
  // 如果提供了超時時間且組件加載也超時了，
  // 則使用加載失敗時使用的組件。默認值是：`Infinity`
  timeout: 3000
})