百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

Vue 3 进阶用法:异步组件

bigegpt 2025-05-26 13:52 13 浏览

一、代码分割

一个大型前端应用，如果所有代码都放在单一文件，体积会特别大，下载时间长，白屏时间久，用户体验差。

代码分割（Code Splitting）是一种有效的优化方式。提前把代码切分为多个小块，只下载当前必需的部分，用到哪块下载哪块。就像吃自助餐一样，吃多少拿多少。

早期的代码分割一般通过 webpack 实现。随着 ES6 的不断流行，原生的 import() 成为更好的选择。

使用 import() 和《Vue 3 组件入门》介绍的动态组件，可以实现一个简单的代码分割[2]。

实际运行效果如图：

上面代码“糙快猛”地实现了代码分割，但是离“完美”还有一些差距：

  1. 如果组件报错，怎么处理？
  2. 如果加载时间长，如何处理？
  3. 如果加载超时，怎么办？

二、异步组件

为了解决加载组件中出现的报错、超时、状态展示等问题，可以使用 Vue 3 提供的异步组件（Async Components），它对于加载过程做了更细致的控制。

使用 defineAsyncComponent() 函数定义异步组件。它有几个主要选项：

  • loader：加载函数，用于加载指定的目标组件
  • loadingComponent：加载过程中的替身组件
  • errorComponent：加载失败的替罪羊组件
  • delay：设定替身组件出现的延迟时间。如果加载时间够快，替身可以不用出场。默认值是 200ms。
  • timeout：设定超时时间，超过这个时间就算加载失败。默认值是 Infinity，即永不超时。

实例代码如下：

加载中的状态：

加载成功的状态：

加载失败的状态：

三、异步组件的简写形式

如果你不需要那么多状态切换，可以使用异步组件的简写形式。只需要传入 loader 选项对应的加载函数即可。

参考资料

  1. Async Components，https://vuejs.org/guide/components/async.html
  2. 霍春阳，《Vue.js设计与实现》第13章异步组件与函数式组件，人民邮电出版社，2022
  3. JavaScript modules: dynamic import()，https://caniuse.com/es6-module-dynamic-import

完

相关推荐

Go语言泛型-泛型约束与实践（go1.7泛型）

来源：械说在Go语言中，Go泛型-泛型约束与实践部分主要探讨如何定义和使用泛型约束（Constraints），以及如何在实际开发中利用泛型进行更灵活的编程。以下是详细内容：一、什么是泛型约束？**泛型...

golang总结（golang实战教程）

基础部分Go语言有哪些优势？1简单易学：语法简洁，减少了代码的冗余。高效并发：内置强大的goroutine和channel，使并发编程更加高效且易于管理。内存管理：拥有自动垃圾回收机制，减少内...

Go 官宣:新版 Protobuf API（go pro版本）

原文作者：JoeTsai,DamienNeil和HerbieOng原文链接：https://blog.golang.org/a-new-go-api-for-protocol-buffer...

Golang开发的一些注意事项(一)（golang入门项目）

1.channel关闭后读的问题当channel关闭之后再去读取它，虽然不会引发panic，但会直接得到零值，而且ok的值为false。packagemainimport"...

golang 托盘菜单应用及打开系统默认浏览器

之前看到一个应用，用go语言编写，说是某某程序的windows图形化客户端，体验一下发现只是一个托盘，然后托盘菜单的控制面板功能直接打开本地浏览器访问程序启动的webserver网页完成gui相关功...

golang标准库每日一库之 io/ioutil

一、核心函数概览函数作用描述替代方案（Go1.16+）ioutil.ReadFile(filename)一次性读取整个文件内容（返回[]byte）os.ReadFileioutil.WriteFi...

文件类型更改器——GoLang 中的 CLI 工具

我是如何为一项琐碎的工作任务创建一个简单的工具的，你也可以上周我开始玩GoLang，它是一种由Google制作的类C编译语言，非常轻量和快速，事实上它经常在Techempower的基准测...

Go (Golang) 中的 Channels 简介（golang channel长度和容量）

这篇文章重点介绍Channels(通道)在Go中的工作方式，以及如何在代码中使用它们。在Go中，Channels是一种编程结构，它允许我们在代码的不同部分之间移动数据，通常来自不同的goro...

Golang引入泛型:Go将Interface「」替换为“Any”

现在Go将拥有泛型：Go将Interface{}替换为“Any”，这是一个类型别名：typeany=interface{}这会引入了泛型作好准备，实际上，带有泛型的Go1.18Beta...

一文带你看懂Golang最新特性（golang2.0特性）

作者：腾讯PCG代码委员会经过十余年的迭代，Go语言逐渐成为云计算时代主流的编程语言。下到云计算基础设施，上到微服务，越来越多的流行产品使用Go语言编写。可见其影响力已经非常强大。一、Go语言发展历史...

Go 每日一库之 java 转 go 遇到 Apollo?让 agollo 来平滑迁移

以下文章来源于GoOfficialBlog，作者GoOfficialBlogIntroductionagollo是Apollo的Golang客户端Apollo（阿波罗）是携程框架部门研...

Golang使用grpc详解（golang gcc）

gRPC是Google开源的一种高性能、跨语言的远程过程调用（RPC）框架，它使用ProtocolBuffers作为序列化工具，支持多种编程语言，如C++,Java,Python,Go等。gR...

Etcd服务注册与发现封装实现--golang

服务注册register.gopackageregisterimport("fmt""time"etcd3"github.com/cor...

Golang:将日志以Json格式输出到Kafka

在上一篇文章中我实现了一个支持Debug、Info、Error等多个级别的日志库，并将日志写到了磁盘文件中，代码比较简单，适合练手。有兴趣的可以通过这个链接前往：https://github.com/...

如何从 PHP 过渡到 Golang?（php转golang）

我是PHP开发者，转Go两个月了吧，记录一下使用Golang怎么一步步开发新项目。本着有坑填坑，有错改错的宗旨，从零开始，开始学习。因为我司没有专门的Golang大牛，所以我也只能一步步自己去...

一周热门
最近发表
标签列表