异步组件

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

一、基本用法

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

    打开是个普普通通的hello world 然后有注册有登录 不多说我们直接注册登录试试 登录后有个POST选项,可以上传东西,先试试上传文字 没什么重要的回显 再上传一个文档试试 爆出提示:这里使用的 ...

  2. Web Api出现500 Internal Server Error 错误

    在测试环境一切正常,但是部署到了生产环境发现一直报错.查询网上的方法设置了权限等等.都没有解决 原来发现是数据库连接字符串的问题.只需要把数据库连接字符串修改正确即可!

  3. 模拟Promise的功能

    模拟Promise的功能,  按照下面的步骤,一步一步 1. 新建是个构造函数 2. 传入一个可执行函数 函数的入参第一个为 fullFill函数 第二个为 reject函数: 函数立即执行, 参数函 ...

  4. Redis的常见应用场景

    缓存.分布式数据共享.setnx分布式锁.incrby全局id进行分库分表.计数器.限流(ip为key,计数超过阈值则返回false).购物车(hash,用户key-商品field-数量value). ...

  5. C#关于委托的一些事,开发日志

    ----- 委托是什么------ 其实委托事件很好理解,就当成是c语言中的函数指针或者是回调函数,或者说换种理解方式,信号和槽?触发器和接收器?总之就是一个地方调用了这个函数,那么在另一个地方也会调 ...

  6. 运行typhoon程序的三种方式

    cmd直接编写运行:用于较短 临时执行的代码 解释器命令运行:可以编写较长的代码 并且可以长久保存 利用IDE工具编写:IDE开发者工具自动提示 携带各种功能插件 编写代码效率更高更快

  7. salesforce零基础学习(一百二十四)Postman 使用

    本篇参考: Salesforce 集成篇零基础学习(一)Connected App salesforce 零基础学习(三十三)通过REST方式访问外部数据以及JAVA通过rest方式访问salesfo ...

  8. 买不到的数目【第四届蓝桥杯省赛C++A组,第四届蓝桥杯省赛JAVAC组】

    买不到的数目 小明开了一家糖果店. 他别出心裁:把水果糖包成4颗一包和7颗一包的两种. 糖果不能拆包卖. 小朋友来买糖的时候,他就用这两种包装来组合. 当然有些糖果数目是无法组合出来的,比如要买 10 ...

  9. [Untiy]贪吃蛇大作战(三)——商店界面

    游戏商店界面: 实际的效果图如下: 要实现这个滑动,首先我们需要,一个内容显示区域,一个内容滚动区域,如下图: 其中ItemContent挂载的组件如下: 红框标注的地方是右方的滑动块. 然后Item ...

  10. win32com操作word 第二集:Application&Documents接口

    本课程<win32com操作word API精讲&项目实战>以视频为主,文字教程为辅,公众号ID:一灯编程. 先回答一个网友私信问题: win32com和微软的word接口文档有什 ...