首页 > 其他分享 >vue的异步组件

vue的异步组件

时间:2023-01-23 02:22:57浏览次数:54  
标签:AsyncComp 异步 vue defineAsyncComponent 组件 加载

异步组件

异步组件:可以在首页加载之前先加载的组件,主要是做性能优化,提高用户体验

一、基本用法

在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...从服务器获取组件
    resolve(/* 获取到的组件 */)
  })
})
// ... 像使用其他一般组件一样使用 `AsyncComp`

 

标签:AsyncComp,异步,vue,defineAsyncComponent,组件,加载
From: https://www.cnblogs.com/chccee/p/17064857.html

相关文章

  • 动态组件
                 ......
  • vue学习之---关闭 eslint 命名规则校验
    报错:“Componentname"XXX"shouldalwaysbemulti-word”原因:你的某些组件,没有“驼峰式”命名关闭校验的方法:package.json中配置如下即可 ......
  • Vue变量的数据已更新,但for遍历出的dom元素没有变化的解决办法
    原因如果使用了v-for指令来渲染一组组件,那么每个组件都会被分配一个唯一的key值。当数据源发生变化时,Vue会尝试重用已有组件,而不是重新创建。当dataList元素减少......
  • VUE3,如何在外部修改data里面的对象?
    提问: VUE3,如何在外部修改data里面的对象?varmyvue={   data(){       return{           test:{}       }   },   creat......
  • 解决vue部署到服务器请求接口404问题
    解决vue部署到服务器请求接口404问题:https://blog.csdn.net/weixin_44692055/article/details/103693859?utm_medium=distribute.pc_relevant.none-task-blog-2~default~ba......
  • vue3学习之---webpack配置【resolve.alias修改】
    在vue3中,脚手架生成的项目里,webpack的配置文件没有了,因为公共的配置被封装到安装包里了,可以找到如下目录,同样可以修改配置文件:node_modules》@vue》cli-service   ......
  • VueRouter路由嵌套
    1.前言本小节我们介绍如何嵌套使用VueRouter。嵌套路由在日常的开发中非常常见,如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置路由。2......
  • Vue中的 消息订阅与发布(pubsub)
    1:内容说明:2:界面示例:......
  • 06-路由-组件详解
    上一篇博客中已经展示了部分路由解析的源码,但是比较大概,不够清晰,只能提供调试的思路。这一篇博客将会抽出路由的每一个组件。详细阐述路由如何解析的。前面不会连贯起每一......
  • JavaScript 异步编程
    JavaScript是一种单线程语言,这意味着只有一个线程可以在同一时间执行JavaScript代码。在JavaScript中,异步编程是一种编写不阻塞代码的方式,它可以在不影响页面响应的情......