vue动态组件和异步组件,vue3.0异步组件

　　本文主要详细介绍了Vue组件开发中的异步组件。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

　　一.导言vue III中的异步组件。异步组件和暂记的摘要

目录

　　在讨论异步组件之前，我们先来回顾一下webpack打包的分包操作。我们可以使用import()异步加载模块来实现分包操作。导入函数的返回值是一个承诺，所以我们可以在下一步使用then。

　　下图是打包后的文件目录，因为如果我们同步加载math.js文件，这个时候就没有中间文件了，浏览器这个时候请求资源就会很慢。

一、引入

　　通过上面的webpack配置，我们理解了为什么需要分包。这个时候，我们想问一个问题。如果在用户第一次浏览的时候下载一个网站的所有页面，就会出现一个问题，就是首屏加载太慢。

　　如果我们的项目太大，我们希望异步加载一些组件(即分包处理)。这时Vue给我们提供了一个函数definesaynccomponentdefinitioneasynccomponent，可以传入两种类型的参数。第一个是函数，需要返回Promise，第二个参数是对象类型，配置异步函数。

　　第一种写法：函数写法

　　打包文件

　　第二种写法：对象写法

　　如图所示，可以实现委外操作。请详细介绍传入对象中的选项。

　　Loader选项：需要一个已加载的模块，对应一个函数。

　　LoadingComponent:加载过程中显示的组件。

　　ErrorComponent:加载失败时显示的组件。

　　拖延：给时间。当加载时间超过此时间时，将直接显示错误组件。

　　Suspensible:定义组件是否可以挂起，默认值为true。

二、vue中的异步组件

　　悬念是一个具有可变功能的实验性API。

　　悬念有两个槽，一个是默认，另一个是回退。当插槽中的组件可以显示时，将显示默认插槽中的内容，否则，将显示回退默认插槽中的内容。

三、异步组件和suspense

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。