当前位置：网站首页 > 技术分类 > 正文

Vue 3 进阶用法:异步组件（vue中的异步组件）

ztj100 2025-03-25 19:44 96 浏览 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

完

vue components

上一篇：vue 动态加载 router 配置（vue动态加载数据）
下一篇：vue3.x自定义组件实现v-model（vue使用自定义组件）

Vue 3 进阶用法:异步组件（vue中的异步组件）

一、代码分割

二、异步组件

三、异步组件的简写形式

参考资料

相关推荐

取消回复欢迎你发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

这一次，彻底搞懂Java并发包中的Atomic原子类

Vue 3 进阶用法:异步组件（vue中的异步组件）

一、代码分割

二、异步组件

三、异步组件的简写形式

参考资料

相关推荐

取消回复欢迎 你 发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

这一次，彻底搞懂Java并发包中的Atomic原子类

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起