Vue组件开发之异步组件详解
一、引入
我们在讲异步组件之前，我们再来回顾一下webpack打包时的分包操作。我们可以使用import()异步加载模块来实现分包操作。import函数的返回值是一个Promise，所以我们可以使用then进行下一步处理。
如下图所示为打包后的文件目录，因为我们如果同步加载math.js文件，此时就不存在中间的文件，此时当浏览器请求资源时，就会很慢。
二、vue中的异步组件
通过上面的webpack配置我们明白了为什么要进行分包操作，此时我们想一个问题，如果一个网站的页面在用户第一次浏览器时就将全部页面都下载了，这样会出现一个问题，就是首屏加载过慢。
如果我们的项目过大了，对于某些组件我们想要异步加载(也就是分包处理)，此时Vue给我们提供了一个函数defineAsyncComponentdefineAsyncComponent可以传入两种类型的参数，第一个是函数，该函数需要返回Promise，第二个参数是一个对象类型，对异步函数进行配置。
第一种写法：函数写法
打包后的文件
第二种写法：对象写法
如图所示是可以实现分包操作，相面详细介绍一下传入对象中的选项。
loader选项：需要一部加载的模块，对应的是一个函数。
loadingComponent:加载过程中显示的组件。
errorComponent:加载失败时显示的组件。
delay:给出时间，当加载时间超过该时间，直接显示error组件。
suspensible:定义组件是否可挂起,默认是true。
三、异步组件和suspense
suspense是一个实验功能的API，其功能可变。
Suspense存在两个插槽，一个是default, 另一个是fallback,default插槽中的内容是当该插槽中的组件可以显示则展示，如果不可以展示，则显示fallback中的内容。
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
今天我们来学习一下watch侦听器的好兄弟 watchEffect 侦听器。这个相对来说比较简单，用的不是很多，当然了，根据自己的项目情况自行决定使用，希望对大家有所帮助2022-07-07
这篇文章主要介绍了Vue倒计时3秒后返回首页Demo,倒计时结束后要清除计时器,防止内存泄漏,本文通过示例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
vue2.0+vue-router构建一个简单的列表页的示例代码
这篇文章主要介绍了vue2.0+vue-router构建一个简单的列表页的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue之computed的缓存特性,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家详细介绍了vue3封装计时器组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了关于elementui之封装下载模板和导入文件组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了如何用vue设计一个日历表，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了nuxt框架中对vuex进行模块化设置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了Vue实现简单的发表评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
本篇文章主要介绍了详解如何使用webpack在vue项目中写jsx语法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论