Vue组件开发之异步组件详解
目录
- 一、引入
- 二、vue中的异步组件
- 三、异步组件和suspense
- 总结
一、引入
我们在讲异步组件之前,我们再来回顾一下webpack打包时的分包操作。我们可以使用import()
异步加载模块来实现分包操作。import
函数的返回值是一个Promise
,所以我们可以使用then
进行下一步处理。
如下图所示为打包后的文件目录,因为我们如果同步加载math.js文件,此时就不存在中间的文件,此时当浏览器请求资源时,就会很慢。
二、vue中的异步组件
通过上面的webpack配置我们明白了为什么要进行分包操作,此时我们想一个问题,如果一个网站的页面在用户第一次浏览器时就将全部页面都下载了,这样会出现一个问题,就是首屏加载过慢。
如果我们的项目过大了,对于某些组件我们想要异步加载(也就是分包处理),此时Vue给我们提供了一个函数defineAsyncComponent
defineAsyncComponent
可以传入两种类型的参数,第一个是函数
,该函数需要返回Promise
,第二个参数是一个对象类型,对异步函数进行配置。
第一种写法:函数写法
打包后的文件
第二种写法:对象写法
如图所示是可以实现分包操作,相面详细介绍一下传入对象中的选项。
loader选项
:需要一部加载的模块,对应的是一个函数。
loadingComponent
:加载过程中显示的组件。
errorComponent
:加载失败时显示的组件。
delay
:给出时间,当加载时间超过该时间,直接显示error
组件。
suspensible
:定义组件是否可挂起,默认是true
。
三、异步组件和suspense
suspense是一个实验功能的API,其功能可变。
Suspense
存在两个插槽,一个是default
, 另一个是fallback
,default
插槽中的内容是当该插槽中的组件可以显示则展示,如果不可以展示,则显示fallback
中的内容。
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!
相关推荐
-
vue实现按需加载组件及异步组件功能
说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template中的代码: 这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名 <template slot-scope="scope"> <el-button type="text" size="mini" @click=&qu
-
vue3.0+vite2实现动态异步组件懒加载
创建一个vite项目 性能决定成败;vite确实快: cmd 命令行(默认你已经安装了node & npm),执行npm init @vitejs/app vue-study – --template vue: cd至vue-study,npm install(安装依赖); npm run dev(启动项目): 创建组件 新建一个目录为pages,pages下面再新建一个目录contents,contens下面可以新建具体的组件目录页面,此时目录结构为 App.vue <template&g
-
Vue3异步数据加载组件suspense的使用方法
目录 前言 创建组件 总结 前言 Vue3 增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,本文通过简单的实例介绍其使用方法,如对其有兴趣,可以参阅官方文档. 通常组件在正确呈现之前需要执行某种异步请求是很常见的,通常是通过设计一种机制开发人员按照机制处理这个问题,有很多很好的方法实现这个需求. 例如,从一个 API 异步获取数据,并希望在获取响应数据解析完时显示一些信息,如 loading 效果,在Vue3中可以使用 suspense 组件来执行这
-
Vue动态组件和异步组件原理详解
前言 在vue官方资料中,我们可以可以很学会如何通过vue构建"动态组件"以及"异步组件",然而,在官方资料中,并没有涉及到真正的"动态异步"组件,经过大量的时间研究和技术分析,我们给出目前比较合理的技术实现方式,并分析一下vue动态异步组件的原理 动态组件 & 异步组件的存在,使得我们更方便地控制首屏代码的体积,加快加载速度. 抛开具体细节不谈,一个普通 Vue 组件从创建到展现在页面里,主要经历了以下流程: // 组件 Object
-
深入了解Vue动态组件和异步组件
1.动态组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #app { font-size: 0 } .dynamic-component-demo-tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1p
-
vue前端开发辅助函数状态管理详解示例
目录 mapState mapGetters mapMutations mapActions 示例 小结 mapState 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性.不使用mapState时,获取对象状态,通常放在使用组件的computes属性中,使用方式为: //.... computed: { count: function(){ return this.$store.state
-
Vue组件开发之异步组件详解
目录 一.引入 二.vue中的异步组件 三.异步组件和suspense 总结 一.引入 我们在讲异步组件之前,我们再来回顾一下webpack打包时的分包操作.我们可以使用import()异步加载模块来实现分包操作.import函数的返回值是一个Promise,所以我们可以使用then进行下一步处理. 如下图所示为打包后的文件目录,因为我们如果同步加载math.js文件,此时就不存在中间的文件,此时当浏览器请求资源时,就会很慢. 二.vue中的异步组件 通过上面的webpack配置我们明白了为什么
-
详解基于Vue cli开发修改外部组件Vant默认样式
前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s
-
vue前端开发层次嵌套组件的通信详解
目录 前言 示例 小结 前言 vue父子组件之间通过props很容易的将父组件的值传递给子组件,如果一个组件嵌套很多层,每一层之间度需要同props进行传值,很麻烦,且不易维护 示例 [示例]A组件中使用了B组件,B组件中使用了C组件,C组件需要使用A组件的数据text及使用A组件的方法getmethod.A组件代码如下: <template> <div> <P>这是A组件</P> <v-comb></v-comb> </div
-
vue组件间的参数传递实例详解
场景分析 在前端开发中,我们常常会运用到"组件库".在main入口中引入组件库,就可以很轻松的在页面中引入,并做一些基本的配置,如样式,颜色等.只需要在引入的组件中写入特定的属性,就能够定义. 举例说明 例如:element-ui组件库中使用switch开关,有个属性active-color是设置"打开时"的背景色.change事件是触发状态的事件. <el-switch v-model="value" :active-color=&quo
-
vue组件三大核心概念图文详解
前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型.默认值或自定义校验属性的值,这点在组件开发中很重要,
-
Vue组件之间四种通信方式详解
目录 前言 父子组件通信 父组件与子孙组件的通信 父组件获取子组件数据 无需考虑组件关系的通信 前言 vue 框架提供了前端开发组件的思想,可以通过组件来组合成一个完整的页面,都是随着组件数量原来越多,组件之间难免需要相互通信,那么如何实现组件之间的通信呢?下面介绍 vue 组件通信的几种方法 父子组件通信 父组件传递 props 给子组件(数据以及改变数据的方法),子组件通过 $emit 来更新父组件的状态 父组件定义,声明状态 { name: 'baidu.com' } 以及可以改
-
vue组件间通信子与父详解(二)
接着vue组件父与子通信详解继续学习. 二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 } } ②绑定事件处理函数 事件一般情况 都是自定义事件 <child-component @myEvent="recvMsg"></child-component> ③在子组件触发
-
vue 父组件通过$refs获取子组件的值和方法详解
前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调
-
vue组件 keep-alive 和 transition 使用详解
1.keep-alive 能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. // 组件 export
随机推荐
- 用xslt+css让RSS显示的跟网页一样漂亮
- 详解Spring Boot 事务的使用
- JS 中使用Promise 实现红绿灯实例代码(demo)
- Android模拟器中窗口截图存成文件实现思路及代码
- Yii统计不同类型邮箱数量的方法
- PHP5的XML新特性
- php中字符串和正则表达式详解
- Linux下创建nginx脚本-start、stop、reload…
- PHP中strpos、strstr和stripos、stristr函数分析
- chrome浏览器如何断点调试异步加载的JS
- 让nodeJS支持ES6的词法----babel的安装和使用方法
- LSI SAS1068 RAID 阵列卡图文配置教程
- JQuery1.8 判断元素是否绑定事件的方法
- Python返回真假值(True or False)小技巧
- 一个超简单的jQuery回调函数例子(分享)
- 基于JavaScript实现瀑布流效果(循环渐近)
- Win XP操作系统支持工具全接触
- C#中实现查找mysql的安装路径
- 解决无法在unicode和非unicode字符串数据类型之间转换的方法详解
- Android利用SurfaceView实现简单计时器