vue异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。vue允许以工厂函数的方式定义组件，这个工厂函数会异步定义组件，在组件需要渲染时才进行加载。

异步组件

在vue中导入组件一般直接引入即可，异步组件时通过 import( ) 方法进行动态导入，这种导入方式可以让系统首屏加载的速度大大提高。

// 全局
Vue.component('async-component', ()=>import('./my-async-component'));

// 局部
new Vue({
  components: {
    'async-component': ()=>import('./my-async-component'),
  }
})

特殊状态

在系统中牵扯到加载等异步状态的情况，就必然存在针对特殊情况的处理。

vue中针对异步组件提供了三种状态及控制属性。

import LoadingComponent from "./loadingComponent";
import ErrorComponent from "./errorComponent";

const AsyncComponent = ()=>({
  // 异步加载的组件
  component: import("./MyComponent.vue"),
  // loading状态中显示的组件
  loading: LodingComponent,
  // 加载失败显示的组件
  error: ErrorComponent,
  // 加载组件时的延迟时间，默认值为 200ms
  delay: 200,
  // 加载组件超时时间，超时后默认使用 error 组件
  timeout: 3000
})

在 vue 构建的大型系统中，一般不会在页面中使用异步组件，而是在路由上使用，达到异步加载的效果。

注意：此处阐述的是 Vue2 中的异步组件方法，Vue3中对异步组件做了更新。留坑～