当前位置：码云笔记 > 前端 > Vue3教程 > 35. [组件]Vue3异步组件和Promise讲解
码云码云 Vue3教程

35. [组件]Vue3异步组件和Promise讲解

AI 概述
这节我们要讲明白 Vue 中的异步组件，弄明白什么是异步组件，其实是有前置知识的，就是你需要知道什么是同步，什么又是异步。而且你还会要使用Promise，如果你 Promise 用的不是很熟练，建议你先去复习一下 JavaScript 的基础知识，然后再进行学习。 编写基本代码和同步组件 新建一个文件Demo35.html，编写如下代码： &l...

这节我们要讲明白 Vue 中的异步组件，弄明白什么是异步组件，其实是有前置知识的，就是你需要知道什么是同步，什么又是异步。而且你还会要使用Promise，如果你 Promise 用的不是很熟练，建议你先去复习一下 JavaScript 的基础知识，然后再进行学习。

编写基本代码和同步组件

新建一个文件Demo35.html，编写如下代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo35</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        template: ` 

        `
    })

    const vm = app.mount("#app")
</script>

然后编写一个同步组件（其实以前学的全部都是同步组件），并在父组件里使用它。

<script>
    const app = Vue.createApp({
        template: ` 
            <div><tongbu /></div>
        `
    })
    app.component('tongbu', {
        template:`<div>mybj123.com</div>`
    })

    const vm = app.mount("#app")
</script>

这时候就是一个同步组件，因为调用后，代码直接就会被执行。那我们了解同步组件后，我们再了解一下异步组件。

vue3 中的异步组件

vue3 异步组件就是在调用组件时，这个组件并不立即渲染，而是要等带一些业务逻辑完成后，才会进行执行组件内的逻辑和渲染到页面上。我们先写一个异步组件，感受一下。

app.component('async-component',Vue.defineAsyncComponent(()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve({
                template:`<div>这是一个异步组件</div>`
            })
        },3000)
    })

}))

这段代码中，新建了一个组件叫做async-component，然后用defineAsyncComponent()声明这是一个异步组件，在组件内部我们用Promise来完成逻辑。逻辑非常简单，用setTimeout控制 3 秒后渲染模板template，展示内容。也就是说 3 秒后，组件才知道最终展示的内容是什么。这就是一个典型的异步组件。

[组件]异步组件和 Promise 讲解

异步组件经常在去后台请求数据的时候进行使用，也可以把一个大项目拆分成很多小的异步组件，然后根据需要，异步加载这些小项目。

如果本文的内容你还不能理解，也不要灰心。因为这节的前置知识是你会使用 Promise，你可以先去学习一下 Promise 的知识，然后再回来听看这节内容。应该可以轻松很多。

以上关于35. [组件]Vue3异步组件和Promise讲解的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 35. [组件]Vue3异步组件和Promise讲解

码云 SVIP

分享到：

相关推荐

发表回复