本篇文章很简单,我们主要想说明两个问题 动态组件Component 和 异步加载组件。
一、常用的组件加载方式
首先,我们要明确什么是异步加载组件,那与之对应的同步加载组件又是怎么一回事呢?字面意思就是,同步加载就是指,随着项目的初始化完成,所有要用到的组件都已经被加载到页面中了,有时候,我们是通过设置样式的方式让其隐藏。虽然这种方式能解决我们的大部分问题,但是在追求首屏加载时间最短的情况下,一次性加载所有的组件,并不是一个很明智的选择。
我们可以通过先加载一部分页面必须的组件,另外一部分组件当需要的时候在加载,比如登录组件,当我们点击登录按钮的时候,再加载登录组件。
二、码上见真知
1.同步方式引用组件
import MHeader from '@c/MHeader'
export default {
name: 'MHeader',
components: {
MHeader
}
}
2. 异步方式引用组件
<template>
<div class="home">
<button @click="toggleAbout">toggleAbout</button>
<button @click="toggleMy">toggleMy</button>
<Component :is="currentComponent"></Component>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
currentComponent: 'about'
}
},
components: {
// 异步组件引入方式,异步组件:只有在需要去展示这个组件的时候,才会把这个组件进行渲染
about: () => import('./About'),
my: () => import('./My')
},
methods: {
toggleAbout () {
this.currentComponent = 'about'
},
toggleMy () {
this.currentComponent = 'my'
}
}
}
</script>
为了我们可以看到效果,我们要移步到浏览器的netWork面板。当页面初始化的时,加载的文件如下图所示
然后点击toggleMy按钮,又会加载一个文件,如下图所示:
我们可以分别打开这两个文件进行查看。
about.js
/***/
"./src/views/About.vue": /*!*****************************!*\
!*** ./src/views/About.vue ***!
\*****************************/
0.js
/***/
"./src/views/My.vue": /*!**************************!*\
!*** ./src/views/My.vue ***!
从中,我们可以看出组件异步加载的身影了!