我们通常会在实际开发中,将项目进行分包处理,以此加快项目的速度

即使用异步组件

  1. //异步组件,分包处理
  2. import {defineAsyncComponent} from "vue";
  3. import Loading from "@/11_异步组件的使用/Loading";
  4. //1.
  5. const AsyncCategory = defineAsyncComponent(() => {
  6. import("./AsyncCategory")
  7. })
  8.  
  9. //2.
  10. // const AsyncCategory = defineAsyncComponent({
  11. // loader:()=>import("./AsyncCategory"),
  12. // //loader没下载下来的时候,用loadingComponent来占位
  13. // loadingComponent:Loading,
  14. // errorComponent:Error,
  15. // //delay:在显示loadingComponent组件之前等待多长时间
  16. // delay:2000,
  17. // /*
  18. // * err是错误信息
  19. // * retry:是一个函数,调用retry尝试重新加载
  20. // * attempts:调用retry的次数
        fail:一个函数,失败后直接退出

  21. // * */
  22. //
  1. onError(error, retry, fail, attempts) {
  2. if (error.message.match(/fetch/) && attempts <= 3) {
  3. // 请求发生错误时重试,最多可尝试 3 次
  4. retry()
  5. } else {
  6. // 注意,retry/fail 就像 promise 的 resolve/reject 一样:
  7. // 必须调用其中一个才能继续错误处理。
  8. fail()
  9. }
  10. }
  1. //
  2. //
  3. //
  4. // })

  1. export default {
    name: "App",
    components: {
    Loading,
    Home,
    AsyncCategory
    }
    }
  1.  

vue3-异步组件的使用的更多相关文章

  1. vue3.x异步组件

    在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块 vue2.x 曾经简单的异步组件 components: { AsyncComponent: () =& ...

  2. vue3 + vite实现异步组件和路由懒加载

    在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异步组件和路由懒加载的实现 ...

  3. vue3的Async Components异步组件

    前言: 当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载:这样的做得目的可以很好的提高用户体验. 传统方式引入组件如下,这样会一次先加载所以组件 先在 ...

  4. React(17)异步组件

    26.异步组件当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现:React ...

  5. 026-微软Ajax异步组件

    ASP.Net中内置的简化AJAX开发的控件UpdatePanel放入ScriptManager,将要实现AJAX效果的控件放到UpdatePanel中即可.UpdatePanel原理探秘,用Http ...

  6. vue路由异步组件案例

    最近研究了vue性能优化,涉及到vue异步组件.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是异步调用组件前提.异步组件在优先级上让位同步组件.下面介绍的是怎么实现异步组件. ...

  7. vue的异步组件按需加载

    当build打包后,app.js过大的时候,可以考虑用异步组件的方式. import HomeHeader from "./components/Header"; import H ...

  8. 七、vue语法补充二(动态组件 & 异步组件、访问元素 & 组件、混入)

    1..sync 修饰符 2.3.0+ 新增 vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定.类似于v-model的效果 例子: this.$ ...

  9. vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...

  10. vue深入了解组件——动态组件&异步组件

    一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...

随机推荐

  1. spring property标签中的 ref属性和ref 标签有什么不同

    spring的配置文件可能会有多个<property name="a" ref="b" />就是找当前配置文件里的bean 也就是b <ref ...

  2. 手势仿QQ侧滑---秀清

    // // SlideViewController.h // qqcehua // // Created by 张秀清 on 15/5/25. // Copyright (c) 2015年 张秀清. ...

  3. 基于ASP.NET Core 5.0使用RabbitMQ消息队列实现事件总线(EventBus)

    文章阅读请前先参考看一下 https://www.cnblogs.com/hudean/p/13858285.html 安装RabbitMQ消息队列软件与了解C#中如何使用RabbitMQ 和 htt ...

  4. 框架5--nginx安装部署 下(web服务)

    目录 1.提纲 2.Nginx虚拟主机 3.Nginx日志 4.Nginx访问控制模块 5.Nginx状态监控模块 6.访问连接控制模块 框架5--nginx安装部署 下(web服务) 1.提纲 1. ...

  5. 《PHP程序员面试笔试宝典》——如何应对自己不会回答的问题?

    如何巧妙地回答面试官的问题? 本文摘自<PHP程序员面试笔试宝典> 在面试的过程中,对面试官提出的问题求职者并不是都能回答出来,计算机技术博大精深,很少有人能对计算机技术的各个分支学科了如 ...

  6. 图文并茂详解 NAT 协议!

    什么是 NAT 协议 我们的计算机要想访问互联网上的信息,就需要一个地址,而且这个地址是大家(其他主机)所认可的,是公共的,这个地址也叫做公有 IP 地址. 与之相对的,除了公有 IP 地址外,还有私 ...

  7. 微服务从代码到k8s部署应有尽有系列(七、支付服务)

    我们用一个系列来讲解从需求到上线.从代码到k8s部署.从日志到监控等各个方面的微服务完整实践. 整个项目使用了go-zero开发的微服务,基本包含了go-zero以及相关go-zero作者开发的一些中 ...

  8. 你所不知道的 C# 10新特性

    我们很高兴地宣布 C# 10 作为 .NET 6 和 Visual Studio 2022 的一部分已经发布了.在这篇文章中,我们将介绍 C# 10 的许多新功能,这些功能使您的代码更漂亮.更具表现力 ...

  9. [题解]第十一届北航程序设计竞赛预赛——D.最大公约数

    题目描述 给一个长度为n(1<=n<=100000)的正整数列,分成尽量多的非空段,使得每一段的最大公约数相等.一个数的最大公约数是它本身. 解题思路 要求每一段子列的gcd相等,不妨设为 ...

  10. windev中的内存机制及其与C语言中的内存指针相似性(一)

    windev中的内存机制,是初入windev世界必须要越过的一道高山,以下我的理解和经验未必都对,如有错误或遗漏,以后再纠正或补充!另外,以下内容,咱先谈应用,再说对机制的认识和理解. 一.新建表单, ...