本篇文章很簡單安吁，我們主要想說明兩個問題 動態(tài)組件Component 和 異步加載組件趋翻。
一睛琳、常用的組件加載方式
??????首先，我們要明確什么是異步加載組件踏烙，那與之對應(yīng)的同步加載組件又是怎么一回事呢师骗？字面意思就是，同步加載就是指宙帝，隨著項目的初始化完成丧凤，所有要用到的組件都已經(jīng)被加載到頁面中了，有時候步脓，我們是通過設(shè)置樣式的方式讓其隱藏愿待。雖然這種方式能解決我們的大部分問題，但是在追求首屏加載時間最短的情況下靴患，一次性加載所有的組件仍侥，并不是一個很明智的選擇。
??????我們可以通過先加載一部分頁面必須的組件鸳君，另外一部分組件當(dāng)需要的時候在加載农渊，比如登錄組件，當(dāng)我們點擊登錄按鈕的時候或颊，再加載登錄組件砸紊。
二、碼上見真知
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面板平挑。當(dāng)頁面初始化的時游添，加載的文件如下圖所示
初始化
然后點擊toggleMy按鈕系草，又會加載一個文件，如下圖所示：
點擊toggleMy按鈕后的結(jié)果
我們可以分別打開這兩個文件進行查看唆涝。
about.js
/***/
"./src/views/About.vue": /*!*****************************!*\
!*** ./src/views/About.vue ***!
\*****************************/
0.js
/***/
"./src/views/My.vue": /*!**************************!*\
!*** ./src/views/My.vue ***!
從中找都，我們可以看出組件異步加載的身影了！
