Vue 95 ，Vue3 组件懒加载，页面显示 [object Promise]

北城笑笑

已于 2025-03-28 18:14:12 修改

阅读量1.1k

点赞数 21

分类专栏： Vue 文章标签：前端 javascript vue.js

于 2025-03-22 10:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65793170/article/details/146425071

版权

Vue 专栏收录该内容

88 篇文章

订阅专栏

前言

在现代前端开发领域，性能优化是项目成功的关键因素之一。伴随 Vue 项目规模持续扩大，组件数量不断增多，打包后的文件体积也会显著增大，这会导致应用加载时间延长，严重影响用户体验。Vue3 提供的组件懒加载功能，能够有效解决这一问题，通过在需要时才加载组件，减少初始加载的文件大小，进而提升应用的响应速度。这里将全面且深入地介绍 Vue3 组件懒加载的实现方式，同时探讨相关注意事项。

一、组件懒加载

为什么需要组件懒加载，大型项目的性能瓶颈

在大型 Vue 应用中，一次性加载所有组件会使得初始加载时间大幅增加。特别是某些组件仅在特定场景下使用，提前加载这些组件会造成资源的浪费。组件懒加载可以让我们在需要使用某个组件时再进行加载，从而减少初始加载的文件体积，加快应用的响应速度。

二、组件懒加载的基本实现

2.1 错误示例及原因分析

在 Vue3 中，如果直接使用以下方式引入组件：

<template>
    <div class="big_screenIndex">
        
        <Cesium_Map />


    </div>
</template>

export default {
    name: 'WisdomJkDpIndex',
    components: {
        Cesium_Map: () => import("./comps/cesium.vue"),
    },
    data() {
        return {};
    }
};

当在模板中使用 <Cesium_Map /> 时，页面会显示 [object Promise]。这是因为 import() 函数返回的是一个 Promise 对象，而 Vue3 无法直接渲染 Promise，需要使用特定的方法来处理异步组件。因此该组件懒加载的方法，只适用于 Vue2 版本中使用。

2.2 defineAsyncComponent

2.21 Vue2语法

为了解决上述问题，Vue3 提供了 defineAsyncComponent 方法来处理异步组件。以下是使用该方法实现组件懒加载的示例：

<template>
    <div>
        <!-- 使用懒加载的组件 -->
        <Cesium_Map />
    </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
    name: 'WisdomJkDpIndex',
    components: {
        // Vue3 组件懒加载
        Cesium_Map: defineAsyncComponent(() => import("./comps/cesium.vue")),
    },
    data() {
        return {};
    },
};
</script>

代码逻辑实现流程

导入 defineAsyncComponent 方法：从 vue 包中导入 defineAsyncComponent 方法，该方法用于创建异步组件。
定义异步组件：在 components 选项中，使用 defineAsyncComponent 方法包裹 import() 函数，import() 函数用于动态导入组件。
使用异步组件：在模板中直接使用定义好的异步组件 <Cesium_Map />，当该组件需要渲染时，Vue 会自动加载并渲染它。

以上代码就是在 Vue3 版本中，使用 defineAsyncComponent 方法和 Vue2 选项式API语法，实现的组件懒加载方式。虽然很简单，但还是要记录一下。

2.22 Vue3语法

在 Vue3 的 <script setup> 语法糖中，实现组件懒加载的方式略有不同。

<template>
    <div>
        <!-- 使用懒加载的组件 -->
        <Cesium_Map />
    </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue';

// 定义异步组件
const Cesium_Map = defineAsyncComponent(() => import("./comps/cesium.vue"));
</script>

2.3 Vue2 组件懒加载

Vue2 版本实现组件懒加载

在 Vue2 中，没有 defineAsyncComponent 方法，因此可以通过直接返回 import() 函数的方式实现组件懒加载，所以该组件懒加载的方法，只适用于 Vue2 版本中使用。

<template>
    <div>
        <!-- 使用懒加载的组件 -->
        <Cesium_Map />
    </div>
</template>

<script>
export default {
    name: 'WisdomJkDpIndex',
    components: {
        // Vue2 组件懒加载
        Cesium_Map: () => import("./comps/cesium.vue"),
    },
    data() {
        return {};
    },
};
</script>

在 Vue 2 和 Vue 3 中，处理异步组件的方式确实有所不同。Vue 2 允许直接在 components 选项中使用动态导入（即返回一个 Promise 的函数），而 Vue 3 则要求对异步组件进行更明确的声明，以确保它们能够正确地被识别和渲染。

三、注意事项

3.1 加载状态处理

在组件加载过程中，可能会出现加载延迟的情况。可以通过 defineAsyncComponent 的配置选项来处理加载状态，例如设置 loadingComponent 来显示加载中的提示。

const Cesium_Map = defineAsyncComponent({
    loader: () => import("./comps/cesium.vue"),
    loadingComponent: LoadingComponent, // 自定义加载中的组件
    delay: 200 // 延迟显示加载组件的时间（毫秒）
});

3.2 错误处理

当组件加载失败时，需要进行错误处理。可以通过 errorComponent 选项来显示错误提示。

const Cesium_Map = defineAsyncComponent({
    loader: () => import("./comps/cesium.vue"),
    errorComponent: ErrorComponent, // 自定义错误提示组件
    timeout: 3000 // 加载超时时间（毫秒）
});

3.3 路由懒加载

在使用 Vue Router 时，路由组件也可以进行懒加载，以进一步优化应用性能。

const routes = [
    {
        path: '/cesium',
        component: () => import('./views/CesiumView.vue')
    }
];

3.4 代码分割

组件懒加载依赖于代码分割功能，确保你的构建工具（如 Webpack 或 Vite）配置正确，支持代码分割。

四、本文总结

组件懒加载是一种强大的性能优化策略，通过在需要时动态加载组件，可以显著减少初始加载的文件体积，提升应用的响应速度。在实现组件懒加载时，要注意处理加载状态和错误情况，合理配置代码分割。同时，不同的 Vue 语法（Vue2、Vue3 普通语法和 <script setup> 语法糖）在实现组件懒加载时略有差异，需要根据实际情况进行选择。

另外， Vue 3 移除了对事件总线的支持，直接使用 Vue 实例作为事件总线的方法在 Vue 3 中不再适用。取而代之的是使用像 mitt 这样的轻量级事件库来实现相同的功能。具体详情，请看：

Vue3兄弟组件传值https://blog.youkuaiyun.com/weixin_65793170/article/details/133902556?ops_request_misc=%257B%2522request%255Fid%2522%253A%25222fde431e8b0f3eebb9bf98acb4812ea9%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=2fde431e8b0f3eebb9bf98acb4812ea9&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-133902556-null-null.nonecase&utm_term=mitt&spm=1018.2226.3001.4450