Vue中的异步组件

异步组件是 vue 的一种新能优化的方法，比如可以运用在首屏加载等等场景。

使用过vue 都知道Vue自定义组件，和组件引入方式。下面介绍vue 组件的三种引入方式。

1. 传统引入方式，即最常见的引入方式

    这是使用本地注册的方式将组件引入，在项目初始加载时，组件就被引入、使用、加载.当项目越来越大的时候，就需要考虑速度性能的问题，显然上面的方法是不合理的，这就需要用下面的两种方法了

   import leftLine from "@/views/admanage/components/stepline";
   components: {
       leftLine
     },

2. import方式

 使用() => import('@/views/admanage/components/stepline')替代前面示例中的import Tooltip from "@/views/admanage/components/stepline"。Vue一旦请求渲染将会延迟加载该组件。 

components: {
    leftLine：() => import('@/views/admanage/components/step'）
  },

 可以自定义延迟时间，默认的延迟时间是200ms,200毫秒之后加载组件line.如果加载错误，则会加载errorCom组件。

const leftLine= () => ({ 
     component: import('@/views/admanage/components/step'),
     loading: line,
     error: errorCom,
     delay: 200 })

3. 按需引入方式

 components: {
            leftLine:resolve =>  require(["@/views/admanage/components/step"], resolve),
          
        },