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 的知识,然后再回来听看这节内容。应该可以轻松很多。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 35. [组件]Vue3异步组件和Promise讲解
码云笔记 » 35. [组件]Vue3异步组件和Promise讲解