35 Vue3异步组件

Posted wgchen~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了35 Vue3异步组件相关的知识,希望对你有一定的参考价值。

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

阐述

这节我们要讲明白Vue中的异步组件,弄明白什么是异步组件,其实是有前置知识的,就是你需要知道什么是同步,什么又是异步。

而且你还会要使用 Promise,如果你 Promise 用的不是很熟练,建议你先去复习一下javascript 的基础知识,然后再进行学习。

编写基本代码和同步组件

<!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>willem.com</div>`
    )

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

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

<!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: ` 
            <div><tongbu /></div>
        `
    )
    app.component('tongbu', 
        template:`<div>willem.cn</div>`
    )

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

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

<!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: ` 
            <div>
                <tongbu />
                <async-component />
            </div>
        `
    )

    app.component('tongbu', 
        template:`<div>willem.cn</div>`
    )

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

    ))

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

以上是关于35 Vue3异步组件的主要内容,如果未能解决你的问题,请参考以下文章

Webpack的代码分包&&Vue3中定义异步组件分包&&refs的使用

vue3中的fragment(片段)组件

简单对比vue2.x与vue3.x响应式及新功能

如何在vue3中通过点击按钮异步加载组件

Vue3组件化开发

vue3异步组件(defineAsyncComponentSuspense的使用)