//父組件App中
<template>
  <div v-cloak class="App">
    <button v-for="(item, index) in arr" :key="index" @click="()=>msg=item">點(diǎn)擊切換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>

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

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

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