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

这节我们要讲明白 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 的知识,然后再回来听看这节内容。应该可以轻松很多。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 35. [组件]Vue3异步组件和Promise讲解

发表回复