Vue中的异步组件

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_39975379/article/details/93179282

使用过vue 的小伙伴都知道Vue自定义组件，和组件引入方式。今天笔者要记录并介绍vue 组件的三种引入方式。

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

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

这是使用本地注册的方式将组件引入，在项目初始加载时，组件就被引入、使用、加载

当项目越来越大的时候，就需要考虑速度性能的问题，显然上面的方法是不合理的，这就需要用下面的两种方法了

     2.import方式

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

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

    延迟一定时间加载组件,

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

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

3. 按需引入方式

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

这种方式和import直接引入的方式相差不多，不在多说。