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异步组件的主要内容，如果未能解决你的问题，请参考以下文章