Vue 3 进阶用法之异步组件
一、代码分割
一个大型前端应用，如果所有代码都放在单一文件，体积会特别大，下载时间长，白屏时间久，用户体验差。
代码分割是一种有效的优化方式。提前把代码切分为多个小块，只下载当前必需的部分，用到哪块下载哪块。就像吃自助餐一样，吃多少拿多少。
早期的代码分割一般通过webpack实现。随着 ES6 的不断流行，原生的import()成为更好的选择。
使用 import() 和《Vue 3 基础用法：组件入门》介绍的动态组件，可以实现一个简单的代码分割[2]。
实际运行效果如图：
上面代码“糙快猛”地实现了代码分割，但是离“完美”还有一些差距：
如果组件报错，怎么处理？
如果加载时间长，如何处理？
如果加载超时，怎么办？
二、异步组件
为了解决加载组件中出现的报错、超时、状态展示等问题，可以使用 Vue 3 提供的异步组件（Async Components），它对于加载过程做了更细致的控制。
使用defineAsyncComponent() 函数定义异步组件。它有几个主要选项：
loader：加载函数，用于加载指定的目标组件
loadingComponent：加载过程中的替身组件
errorComponent：加载失败的替罪羊组件
delay：设定替身组件出现的延迟时间。如果加载时间够快，替身可以不用出场。默认值是 200ms。
timeout：设定超时时间，超过这个时间就算加载失败。默认值是 Infinity，即永不超时。
实例代码如下：
加载中的状态：
加载成功的状态：
加载失败的状态：
三、异步组件的简写形式
如果你不需要那么多状态切换，可以使用异步组件的简写形式。只需要传入 loader 选项对应的加载函数即可。
到此这篇关于Vue 3 进阶用法：异步组件的文章就介绍到这了,更多相关Vue 3 异步组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在Vue模板中启用这些表现力库插件的最简单方法是在初始化项目时安装它们,或使用 npm install（或 yarn add）安装包,这篇文章主要介绍了Vue3中如何使用SCSS编写样式,需要的朋友可以参考下2023-12-12
最近在学习使用vue+axios，在使用中发现了一个问题，下面总结分享给大家，这篇文章主要给大家介绍了关于vue使用axios时this的指向问题的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-12-12
这篇文章主要为大家详细介绍了vue数据双向绑定的注意点，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
今天小编就为大家分享一篇基于vue循环列表时点击跳转页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章给大家介绍了vue3如何实现页面跳转,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
vue2中基于vue-simple-upload实现文件分片上传组件功能
这篇文章主要介绍了vue2中基于vue-simple-upload的文件分片上传组件,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue-列表下详情的展开与折叠案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
async和await作为异步函数,语法很简单,就是在函数前面加上async 关键字,来表示它是异步的,下面这篇文章主要给大家介绍了如何通过一文教会你vue中使用async和await的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要为大家介绍了Vue项目环境搭建总结篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要为大家详细介绍了vue+AI智能机器人回复功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
最新评论