Vue 3 进阶用法:异步组件

这篇具有很好参考价值的文章主要介绍了Vue 3 进阶用法:异步组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、代码分割

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

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

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

Vue 3 进阶用法:异步组件

 文章来源地址https://www.toymoban.com/news/detail-855087.html

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

Vue 3 进阶用法:异步组件

 

实际运行效果如图:

Vue 3 进阶用法:异步组件

 

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

  1. 如果组件报错,怎么处理?

  2. 如果加载时间长,如何处理?

  3. 如果加载超时,怎么办?

二、异步组件

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

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

  • loader:加载函数,用于加载指定的目标组件

  • loadingComponent:加载过程中的替身组件

  • errorComponent:加载失败的替罪羊组件

  • delay:设定替身组件出现的延迟时间。如果加载时间够快,替身可以不用出场。默认值是 200ms。

  • timeout:设定超时时间,超过这个时间就算加载失败。默认值是 Infinity,即永不超时。

实例代码如下:

Vue 3 进阶用法:异步组件

 

Vue 3 进阶用法:异步组件

 

加载中的状态:

Vue 3 进阶用法:异步组件

 

加载成功的状态:

Vue 3 进阶用法:异步组件

 

加载失败的状态:

Vue 3 进阶用法:异步组件

 

三、异步组件的简写形式

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

Vue 3 进阶用法:异步组件

 

到了这里,关于Vue 3 进阶用法:异步组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue组件——动态、缓存、异步组件

    语法:静态:component is=\\\"组件名\\\"/component            动态:component :is=\\\"组件名\\\"/component 可以用来实现页面的切换: 问题:当我们在其中一个组件中写了一个输入框,在输入过一次后,切换到其他页面然后再切换回来时,之前输入的值就没有了。因为切换走当前组件时,该组

    2024年02月09日
    浏览(38)
  • Vue.js 中的异步组件是什么?如何使用异步组件?

    在 Vue.js 中,异步组件是一种延迟加载组件的方式,可以大大提高应用程序的性能和加载速度。本文将介绍 Vue.js 中异步组件的概念、优势以及如何使用异步组件。 在传统的 Vue.js 开发中,组件是在应用程序启动时就立即加载的。这种方式虽然简单,但是会导致应用程序的初始

    2024年02月12日
    浏览(37)
  • VUE组件--动态组件、组件保持存活、异步组件

    有些场景可能会需要在多个组件之间进行来回切换,在vue中则使用 component :is=\\\"...\\\" 来实现组件间的来回切换  changeHandler()使用三目运算符,来实现Component1和Component2之间的相互切换  默认为组件1   当组件1切换到组件2时,组件1会被强行销毁 初始态:  点击“更新数据”: 点

    2024年01月19日
    浏览(36)
  • 一段代码理解Python异步函数async的基本用法

    异步函数的使用规则 正常情况下我们的函数时串行的运行的,这里称之为主函数. 异步函数:与主函数并行运行. Python异步函数即async必须在普通函数的命名前加上 async 示例: 执行async函数 async函数内等待:只阻塞当前async函数 m_mock安装 通过上述代码示例可以发现case_a和case_b通过

    2024年02月15日
    浏览(51)
  • vue3 动态组件和异步组件

    当使用 component :is=\\\"...\\\" 来在多个组件间作切换时,被切换掉的组件会被卸载。我们可以通过 KeepAlive组件强制被切换掉的组件仍然保持“存活”的状态。

    2024年02月08日
    浏览(43)
  • Vue 的异步组件

    在项目中,有的组件仅在需要时才会加载,这时就需要用到异步组件。 异步组件本质上是一个函数 ,该函数调用后返回一个 Promise , Promise 成功的结果是一个 组件对象 。一般使用 import() 动态导入组件作为这个 Promise 。 异步组件也可以在组件中使用,比如某些场景下需要获

    2024年02月06日
    浏览(38)
  • 小程序:使用分包异步化解决一个分包引入另一个分包的组件/函数的问题

    我们一般使用小程序插件的时候,喜欢将其放在分包中,因为插件体积会打包进主包内,很容易造成主包体积超过 2M 从而无法发布,我们暂且叫这个有插件的分包叫分包P,这时候另外两个业务分包XY,想引入这个分包P里的插件(插件里包含了几个组件和一些接口函数)。 方

    2024年02月02日
    浏览(42)
  • vue3中实现异步组件

    使用场景一:当组件进入视窗时再进行加载 假设页面中有三个组件A、B、C C组件中有一张图片 打开页面:   如果一个页面中的内容非常多,用户再首次打开时并没有浏览到下方的内容,但页面必须加载完下方的内容才会显示,这无疑非常影响性能 接下来我们做一些调整 创建

    2024年02月06日
    浏览(31)
  • VUE3+vite项目中动态引入组件和异步组件

    1. 把项目中所有vue文件注册成异步组件。 2. 获取组件 在setup函数获取组件 3. 参考如下 Glob 导入 Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块: 以上将会被转译为下面的样子: 你可以遍历 modules 对象的 key 值来访问相应的模块: 匹配到的文件默认是懒加载的

    2024年02月10日
    浏览(103)
  • 学习Vue:【性能优化】异步组件和懒加载

    在Vue.js应用开发中,性能优化是一个至关重要的主题,而异步组件和懒加载是提升性能的有效方法之一。本文将介绍什么是异步组件和懒加载,以及如何在Vue.js中应用这些技术来提升应用性能。 异步组件 异步组件是指在需要的时候再去加载组件的一种方式。传统上,在Vue.

    2024年02月12日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包