Vue浅析讲解动态组件与缓存组件及异步组件的使用

//父组件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)
 })
 //注册全局组件名，但只有一个名字，没有实体，相当于空的
//当需要这个组件时，调用上面的工厂函数，触发webpack的异步加载模块方法
//然后异步请求一个模块，请求成功后，这个模块内容即为组件实体部分，并对应地方渲染，加载内容也缓存下来。
//2 局部
 new Vue({
   components: {
        'component-name':function(resolve) {
           require(['./my-async-component'], resolve)
        }
   }
 })

//1 全局：
Vue.component('component-name',
 （）=> import('./my-async-componnet')//这个 `import` 函数会返回一个 `Promise` 对象,不要问我为什么,人家webpack这样设计的。
 )
//2 局部：
 new Vue({
   components: {
       'component-name': () =>  import('./my-async-componnet')//这个 `import` 函数会返回一个 `Promise` 对象。
   }
 })

//工厂对象可以返回一个如下对象，对象里面的一些配置参数
const AsyncComponent = () => ({
  // 需要加载的组件 (这个 `import` 函数会返回一个 `Promise` 对象。)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})