Vue 3 进阶用法:异步组件（vue中的异步组件）
ztj100 2025-03-25 19:44 90 浏览 0 评论
一、代码分割
一个大型前端应用，如果所有代码都放在单一文件，体积会特别大，下载时间长，白屏时间久，用户体验差。
代码分割（Code Splitting）是一种有效的优化方式。提前把代码切分为多个小块，只下载当前必需的部分，用到哪块下载哪块。就像吃自助餐一样，吃多少拿多少。
早期的代码分割一般通过 webpack 实现。随着 ES6 的不断流行，原生的 import() 成为更好的选择。
使用 import() 和《Vue 3 组件入门》介绍的动态组件，可以实现一个简单的代码分割[2]。
实际运行效果如图：
上面代码“糙快猛”地实现了代码分割，但是离“完美”还有一些差距：
- 如果组件报错，怎么处理？
- 如果加载时间长，如何处理？
- 如果加载超时，怎么办？
二、异步组件
为了解决加载组件中出现的报错、超时、状态展示等问题，可以使用 Vue 3 提供的异步组件（Async Components），它对于加载过程做了更细致的控制。
使用 defineAsyncComponent() 函数定义异步组件。它有几个主要选项：
- loader：加载函数，用于加载指定的目标组件
- loadingComponent：加载过程中的替身组件
- errorComponent：加载失败的替罪羊组件
- delay：设定替身组件出现的延迟时间。如果加载时间够快，替身可以不用出场。默认值是 200ms。
- timeout：设定超时时间，超过这个时间就算加载失败。默认值是 Infinity，即永不超时。
实例代码如下：
加载中的状态：
加载成功的状态：
加载失败的状态：
三、异步组件的简写形式
如果你不需要那么多状态切换，可以使用异步组件的简写形式。只需要传入 loader 选项对应的加载函数即可。
参考资料
- Async Components，https://vuejs.org/guide/components/async.html
- 霍春阳，《Vue.js设计与实现》第13章异步组件与函数式组件，人民邮电出版社，2022
- JavaScript modules: dynamic import()，https://caniuse.com/es6-module-dynamic-import
完
相关推荐
- 其实TensorFlow真的很水无非就这30篇熬夜练
-
好的！以下是TensorFlow需要掌握的核心内容，用列表形式呈现，简洁清晰（含表情符号，<300字）：1.基础概念与环境TensorFlow架构（计算图、会话->EagerE...
- 交叉验证和超参数调整:如何优化你的机器学习模型
-
准确预测Fitbit的睡眠得分在本文的前两部分中，我获取了Fitbit的睡眠数据并对其进行预处理，将这些数据分为训练集、验证集和测试集，除此之外，我还训练了三种不同的机器学习模型并比较了它们的性能。在...
- 机器学习交叉验证全指南:原理、类型与实战技巧
-
机器学习模型常常需要大量数据，但它们如何与实时新数据协同工作也同样关键。交叉验证是一种通过将数据集分成若干部分、在部分数据上训练模型、在其余数据上测试模型的方法，用来检验模型的表现。这有助于发现过拟合...
- 深度学习中的类别激活热图可视化
-
作者：ValentinaAlto编译：ronghuaiyang导读使用Keras实现图像分类中的激活热图的可视化，帮助更有针对性...
- 超强，必会的机器学习评估指标
-
大侠幸会，在下全网同名[算法金]0基础转AI上岸，多个算法赛Top[日更万日，让更多人享受智能乐趣]构建机器学习模型的关键步骤是检查其性能，这是通过使用验证指标来完成的。选择正确的验证指...
- 机器学习入门教程-第六课:监督学习与非监督学习
-
1.回顾与引入上节课我们谈到了机器学习的一些实战技巧，比如如何处理数据、选择模型以及调整参数。今天，我们将更深入地探讨机器学习的两大类：监督学习和非监督学习。2.监督学习监督学习就像是有老师的教学...
- Python 模型部署不用愁!容器化实战，5 分钟搞定环境配置
-
你是不是也遇到过这种糟心事：花了好几天训练出的Python模型，在自己电脑上跑得顺顺当当，一放到服务器就各种报错。要么是Python版本不对，要么是依赖库冲突，折腾半天还是用不了。别再喊“我...
- 神经网络与传统统计方法的简单对比
-
传统的统计方法如...
- 自回归滞后模型进行多变量时间序列预测
-
下图显示了关于不同类型葡萄酒销量的月度多元时间序列。每种葡萄酒类型都是时间序列中的一个变量。假设要预测其中一个变量。比如，sparklingwine。如何建立一个模型来进行预测呢？一种常见的方...
- 苹果AI策略:慢哲学——科技行业的“长期主义”试金石
-
苹果AI策略的深度原创分析，结合技术伦理、商业逻辑与行业博弈，揭示其“慢哲学”背后的战略智慧：一、反常之举：AI狂潮中的“逆行者”当科技巨头深陷AI军备竞赛，苹果的克制显得格格不入：功能延期：App...
- 时间序列预测全攻略，6大模型代码实操
-
如果你对数据分析感兴趣，希望学习更多的方法论，希望听听经验分享，欢迎移步宝藏公众号...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)