异步组件

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

一、基本用法

在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。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. Python模块大全之《 os模块》

    ️前言: os 模块提供了非常丰富的方法用来处理文件和目录.是Python基础必备的,所以我用了6000字详细讲述了绝大部分os模块提供的方法,方法如下 方法一.os.makedirs()和os.re ...

  2. servlet包找不到,webservlet注解无效

    把tomcat/lib/  中的annotations-api.jar和servlet-api.jar复制到jdk/jre/lib/ext/目录中就行了 mine:C:\environment\apa ...

  3. qtcreator 报错error: You need to set an executable in the custom run configuration.

    解决 没有配置运行的可执行文件. 在 Executable 中填入正确的可执行文件位置,这里我使用了一个变量,可以根据 release,debug的区别自动找到对应的可执行文件.

  4. JavaScript入门①-基础知识筑基

    01.JavaScript基础知识 JavaScript(缩写:JS)是一种具有面向对象能力的.解释型的程序语言,基于对象和事件驱动,具有相对安全性的客户端脚本语言.JavaScript是一门完备的 ...

  5. 【LeetCode】剑指 Offer 30. 包含min函数的栈

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的 min 函数在该栈中,调用 min.push 及 pop 的时间复杂度都是 O(1). 思路 最初看到O(1)复杂度的时候,就想 ...

  6. Android-helloword

    环境早已配置完毕,就是后来选择API的时候出现了一点问题,唉,追求时尚,选择最新版本的API,结果就悲剧了,跑不起来,也找不到原因.后来换成Android 4.22 17API Level就行了... ...

  7. Qt多线程开发总览,既然用到了就记录一下

    多线程 在LBD_VM_Intercom中使用的一个简单的实例 陶工给的dll需要进行异步操作才可以将视频画面附到窗体上,必须得在画面出现之后才可以附加画面,否则就有可能出现意外bug,所以需要在这个 ...

  8. 高性能 Jsonpath 框架,Snack3 3.2.50 发布

    Snack3,一个高性能的 JsonPath 框架 借鉴了 Javascript 所有变量由 var 申明,及 Xml dom 一切都是 Node 的设计.其下一切数据都以ONode表示,ONode也 ...

  9. redis(二)

    Redis简单使用 一. Redis的安装 Redis作为一款目前这个星球上性能最高的非关系型数据库之一. 拥有每秒近十万次的读写能力. 其实力只能用恐怖来形容. mac版本, brew: https ...

  10. Dubbo架构设计与源码解析(二) 服务注册

    作者:黄金 一.Dubbo简介 Dubbo是一款典型的高扩展.高性能.高可用的RPC微服务框架,用于解决微服务架构下的服务治理与通信问题.其核心模块包含 [RPC通信] 和 [服务治理] ,其中服务治 ...