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动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- Vue异步组件Demo
Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...
- 揭开Vue异步组件的神秘面纱
简介 在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue ...
- vue3 + vite实现异步组件和路由懒加载
在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异步组件和路由懒加载的实现 ...
- vue高级进阶( 三 ) 组件高级用法及最佳实践
vue高级进阶( 三 ) 组件高级用法及最佳实践 世界上有太多孤独的人害怕先踏出第一步. ---绿皮书 书接上回,上篇介绍了vue组件通信比较有代表性的几种方法,本篇主要讲述一下组件的高级用法和最 ...
- 七、vue语法补充二(动态组件 & 异步组件、访问元素 & 组件、混入)
1..sync 修饰符 2.3.0+ 新增 vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定.类似于v-model的效果 例子: this.$ ...
- vue的异步组件
异步组件 异步组件:可以在首页加载之前先加载的组件,主要是做性能优化,提高用户体验 一.基本用法 在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件.Vue 提供了 de ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- vue路由异步组件案例
最近研究了vue性能优化,涉及到vue异步组件.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是异步调用组件前提.异步组件在优先级上让位同步组件.下面介绍的是怎么实现异步组件. ...
随机推荐
- 图片动态操作,利用SeekBar控制属性示例,适配屏幕解决方案
需求为,让图片适配屏幕大小,并且可以用一个滑块来控制图片的旋转,用一个滑块来控制图片大小,核心语法思路,控制图片的大小, 核心语法为:mImageView.setLayoutParams(new Li ...
- 获取input[type="checkbox"]:checked 所在tr中特定元素
1.要求如下 2.html源码 <div class="btn"> <button type="button" onclick=" ...
- 使用Mockito与Squaretest进行单元测试.
项目开发过程中,不少公司都要求写单元测试的代码,可以提高代码的质量,并且可以减少出现BUG的概率. 对于中小型公司来说,对单元测试不做硬性要求,不写最好.因为还是需要一定的工作量,在保证代码质量和性能 ...
- 使用@RequestBody注解踩的坑
一.问题由来 最近在和前端调试一个自己写的接口时,频频出现问题,让我很是烦恼.因此写下这篇博文来记录开发中遇到的一些问题.第一个问题是 前端页面传递参数后,后台不能正常接收参数.我写好接口以后,通过s ...
- SourceTree 摘樱桃 === 遴选 [不要使用这个功能!!不要使用!不要使用!]
SourceTree 摘樱桃 === 遴选 不要使用摘樱桃!!不要使用!不要使用! 我找了一个文本的git,进行的测试,发现很不好用,文档我又恢复过来了,因为就改了几个字,代码的话,会造成 不可挽回的 ...
- 【开源库推荐】#2 AndroidUtilCode Android常用工具类大全(附API使用说明)
Blankj/AndroidUtilCode: Android developers should collect the following utils(updating). Download Gr ...
- Spring JDBCTemplate Query方法查询
queryspringtypessqldaoemail 近日系统有一个打印采购单的功能,发现连续打印多张后,主机宕机,看了下service和dao层的实现,很繁杂,估计原因主要出在组页面资料的时候,循 ...
- 直播预告:面对技术带来的新机遇,CG人如何腾飞?
"新锐先锋,玩转未来"--首届实时染3D动画创作大赛由瑞云科技主办,英伟达.青椒云.3DCAT实时渲染云协办,戴尔科技集团.Reallusion.英迈.万生华态.D5渲染器.中视典 ...
- PLC与上位机传递数据
1.我这里使用的是HslCommunication 假如传递的是word类型,PLC以16进制封装数组,它有预留,我扩充 PLC博图上是 word[5] 上位机接收 ushort[] Data1=ne ...
- 01-【HAL库】STM32实现串口打印
一.什么是串口 串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式,因为它简单便捷,因此大部分电子设备都支持该通讯方式,电子工程师在调试设备时也经常使用该通讯方式输 ...