vue 异步组件 使用方式

异步组件的应用场景

摘自vue官网

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。
为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。
Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

在webpack项目中使用

全局注册

Main.js

const AsyncComponent = Vue.component('async-component', function (resolve) {
//延时演示
  setTimeout(function () {
          require(['./components/AsyncComponent.vue'], resolve)
      },5000);
});

app.vue

<template>
  <div id="app">
    <async-component></async-component>
  </div>
</template>
<script>
export default {
  name: 'App',
}
</script>

AsyncComponent

<template>
    <div>
        <center>
            <h1>
                my name is async
            </h1>
        </center>
    </div>
</template>

局部注册

<template>
  <div id="app">
    <async-component></async-component>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
      'async-component': function (resolve) {
          //延时演示
          setTimeout(function () {
              require(['./components/AsyncComponent.vue'], resolve)
          }, 5000);
      }
  }
}
</script>

使用vue自带的工厂函数注册

<template>
    <div id="app">
        <async-component></async-component>
    </div>
</template>
<script>
    import loading from './components/Loading.vue'
    import error from './components/Error.vue'
    const AsyncComponent = () => ({
        // 需要加载的组件 (应该是一个 `Promise` 对象)
        component: new Promise((reslove) => {
            setTimeout(()=>{
                require(["./components/AsyncComponent.vue"], reslove)
            },1000);
        }),
        // 异步组件加载时使用的组件
        loading: loading,
        // 加载失败时使用的组件
        error: error,
        // 展示加载时组件的延时时间。默认值是 200 (毫秒)
        delay: 200,
        // 如果提供了超时时间且组件加载也超时了，
        // 则使用加载失败时使用的组件。默认值是：`Infinity`
        timeout: 3000
    });
    export default {
        name: 'App',
        components: {
            'async-component': AsyncComponent
        }
    }
</script>

git 示例

https://gitee.com/study_model/vue-pack-study.git

查看不同分支