异步组件

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

一、基本用法

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

import { defineAsyncComponent } from 'vue'

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

vue的异步组件的更多相关文章

  1. Vue中异步组件(结合webpack,转载)

    转载,原文出处:https://www.jianshu.com/p/40a364b5e964 1.什么是异步组件? 异步组件就是定义的时候什么都不做,只在组件需要渲染(组件第一次显示)的时候进行加载渲 ...

  2. vue路由异步组件案例

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

  3. 极简Vue的异步组件函数

    export default new Router({ routes: [ { path: '/live', name: 'live', component: () => import('@/v ...

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

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

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

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

  6. route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()

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

  7. Vue动态加载异步组件

    背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...

  8. 揭开Vue异步组件的神秘面纱

    简介 在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue ...

  9. vue2组件之异步组件...resolve

    看开源项目的时候看到这样的用法: 发现与之前定义组件的方式不一样,这个resolve又是什么? 原来这个是vue的异步组件实现,可以看这里:<异步组件> 异步组件的需求: 在大型应用中,我 ...

  10. Vue.js 子组件的异步加载及其生命周期控制

    前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...

随机推荐

  1. element-ui 对话框dialog里使用echarts,报错'dom没有获取到'?

    给el-dialog添加@open="open()" 在刚进入页面的时候对话框是关闭的,echarts不进行获取dom,当点击对话框出来的时候,有个opened事件,在这个事件里边 ...

  2. 将现有源码添加进repo管理

    将现有源码添加进repo管理 适用于大型项内无源码管理(git/repo)的源码 前言 ​ 公司在进行一些项目的开发时,从供应商原厂给的code内没有包含任何源码管理的文件.需要多人协同开发,但由于项 ...

  3. SpringMVC01:入门、请求参数绑定、自定义类型转换器、常见注解

    一.介绍--三层架构和MVC 1.三层架构介绍和MVC设计模型介绍 开发架构一般都是基于两种形式,一种是 C/S 架构,也就是客户端/服务器,另一种是 B/S 架构,也就是浏览器/服务器.在 Java ...

  4. 大规模爬取(新浪为例子)网页之downloader、parser的封装(涉及编码等细节)

    import requests import cchardet import traceback from lxml import etree def downloader(url,timeout = ...

  5. 配置 DosBox

    配置 DosBox DosBox 在高分辨的屏幕上窗口很小. 修改分辨率 Win7 及以上配置文件位于{system drive}:\Users\{username}\AppData\Local\DO ...

  6. RequestMappingHandlerMapping请求地址映射的初始化流程!

    之前的文章里,介绍了DispatcherSerlvet处理请求的流程. 其中一个核心的步骤是:请求地址映射,即根据request获取对应的HandlerExcecutionChain. 为了后续的请求 ...

  7. 微服务组件-----Spring Cloud Alibaba 注册中心Nacos的CP架构Raft协议分析

    前言 本篇幅是继  注册中心Nacos源码分析 的下半部分. 意义 [1]虽说大部分我们采用注册中心的时候考虑的都是AP架构,为什么呢?因为性能相对于CP架构来说更高,需要等待的时间更少[相对于CP架 ...

  8. Vm无法连接到虚拟机,请确保您有权限运行该程序、访问该程序使用的所有目录以及访问所有临时文件目录,未能将管道连接到虚拟机:所有的管道范例都在使用中解决方法

    可能是杀掉进程导致 解决办法: 1.首先杀掉所有VM打头的任务. 2.删掉所有lck文件 3.VM文件夹内有一串很长的数字命名的文件夹或文件,删掉 4.发现被VMware-vmx.exe占用 5.打开 ...

  9. c++随笔测试(Corner of cpp)

    在c++17下,程序的输出是什么?(有可能编译出错,有可能输出未知,有可能是未定义行为) 点击查看代码 #include<iostream> void foo(unsigned int) ...

  10. error: expected ‘)’ before ‘PRIx64’

    打印uint64时编译报错 printf("prefix:0x%"PRIx64"\n",ipv6Prefix); 解决办法:添加头文件 #include < ...